使用 Bootstrap 响应式地向下折叠左右单元格，向上折叠中间单元格

【问题标题】：Responsively collapse left and right cells downwards, middle cell upwards, with Bootstrap使用 Bootstrap 响应式地向下折叠左右单元格，向上折叠中间单元格
【发布时间】：2016-08-02 09:19:22
【问题描述】：

我在左侧有一列文本，中间是图像，右侧是另一列文本。在小屏幕尺寸上，我希望首先显示图像，然后在下面显示文本列。

我该怎么做？

我的 3 列看起来像：

<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>

【问题讨论】：

标签： twitter-bootstrap twitter-bootstrap-3 responsive-design html-table

【解决方案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

【讨论】：

推拉的好例子。