Question

我有一个基本的3列布局（https://jsfiddle.net/mjaa64cj/），但无法在最后一列中的元素的大屏幕上交换文本/图像位置。在移动/平板电脑设备上，列堆栈正常。 Screenshot of the expected layout 我使用bootstrap 3.2。查看小提琴了解详情。这是html代码：

<div class="container">
<div class="row front">
    <div class="col-lg-4">
        <img class="img-responsive" src="holder.js/350x350" />
         <h2>I, Roommate</h2>

        <p>Oh sure! Blame the wizards! Bender, this is Fry's decision… and he made it wrong. So it's time for us to interfere in his life. Man, I'm sore all over. I feel like I just went ten rounds with mighty Thor.</p>
    </div>
    <div class="col-lg-4">
         <h2>The Farnsworth Parabox</h2>

        <p>I just told you! You've killed me! With a warning label this big, you know they gotta be fun! When will that be? Man, I'm sore all over. I feel like I just went ten rounds with mighty Thor. Mor's good friend, Richard Nixon. Say it in Russian</p>
        <img class="img-responsive" src="holder.js/350x350" />
    </div>
    <div class="col-lg-4">
        <div class="row">
            <div class="col-lg-12 col-sm-12">
                 <h2>A Pharaoh to Remember</h2>

                <p>With a warning label this big, you know they gotta be fun! Moving along… Bender, this is Fry's decision… and he made it wrong. So it's time for us to interfere in his life. Morbo can't understand his teleprompter because he forgot how you say that letter that's shaped like a man wearing a hat. Why would I want to know that.</p>
            </div>
            <div class="col-lg-12 col-sm-12">
                <img class="img-responsive  col-sm-push-4" src="holder.js/350x350" />
            </div>
        </div>
    </div>
</div>

尝试过推/拉第3列中的元素，但内容溢出超出屏幕边缘或第2列。你知道如何解决这个问题吗？

引导列中的子列重新排序

0 个答案: