Responsively collapse left and right cells downwards, middle cell upwards, with Bootstrap

Question

I have a column of text on the left, and image in the middle, and another column of text on the right. On small screen sizes, I'd like the image to be displayed first, then the text columns to display below.

How can I do this?

My 3 columns look like:

<div class="row">
  <div class="col-lg-3"><p>Text1</p></div>
  <div class="col-lg-6"><img src="inmiddleorabove.png"></div>
  <div class="col-lg-3"><p>Text2</p></div>
</div>

Answer 1

这是你需要的吗？试试吧：

<div class="row">
    <div class="col-xs-12 col-lg-6 col-lg-push-3">
        <img src="inmiddleorabove.png">
    </div>
    <div class="col-xs-3 col-lg-3 col-lg-pull-6">
        <p>Text1</p>
    </div>
    <div class="col-xs-3 col-lg-3">
        <p>Text2</p>
    </div>
</div>

您需要先为小屏幕设置列的顺序， 然后使用column ordering推送或拉出其他屏幕尺寸的列。

希望得到这个帮助。

请在此处查看：http://bootply.com/y4N70nGh40