Twitter bootstrap 需要将左列行拆分为 2，并在 md/sm 转换中包含中间列和右侧列

【问题标题】：Twitter bootstrap need left column rows to split in 2 and contain mid and right cols in md/sm transitionTwitter bootstrap 需要将左列行拆分为 2，并在 md/sm 转换中包含中间列和右侧列
【发布时间】：2014-03-22 16:20:45
【问题描述】：

我需要将列 2-middle 和 3-right 嵌套在布局中 column1-left 的行之间：

我有这样的布局，

column 1      column 2   column 3
------        --------   --------
Image1        Image4     Image6
Image2&3      Image5     Image7

我需要将其更改为：

col 1
-------
Image1
Image4
Image5
Image6
Image7
Image2&3

在 sm/md 边界

有什么建议吗？有什么说法吗？

【问题讨论】：

标签： twitter-bootstrap responsive-design multiple-columns

【解决方案1】：

这有点不同，但要在较大的屏幕上显示第 2 列、第 1 列和第 3 列，然后切换到在较小的屏幕上查看列在 1、2 和 3 中的列，请使用：

在 bootstrap 中使用 push 和 pull 将按照您希望的方式对齐列。

<!-- Column 1 -->
<div class="col-md-4 col-md-push-4">
    <img src="#" alt="image1"><br/>
    <img src="#" alt="image2"><br/>
    <img src="#" alt="image3">
</div>
<!-- Column 2 -->
<div class="col-md-4 col-md-pull-4">
    <img src="#" alt="image4"><br/>
    <img src="#" alt="image5">
</div>
<!-- Column 3 -->
<div class="col-md-4">
    <img src="#" alt="image6"><br/>
    <img src="#" alt="image7">
</div>

【讨论】：