Bootstrap 3 响应能力 -- 在网格中上下移动模块

Question

我无法找到使用 Bootstrap 3 网格系统更改某些模块位置的方法。

这是我想要的 xs 屏幕顺序（非常简单，只是相互堆叠）。

[       1       ]
[       2       ] 
[       3       ] 
[       4       ]

但是，在 sm 和更大的尺寸上，我想将模块 4 移动到模块 1 的下方，并将模块 2 和 3 放在模块 4 的右侧。标准 Bootstrap 网格可以做到这一点吗？

例如（请注意，有两个 4 框只是为了说明 4 可以大于 2 和 3。

[       1       ]
[    4    ][  2 ]
[    4    ][  3 ]

我在这里尝试过：http://jsfiddle.net/5prkr2tn/1/ 但我不知道如何将第 4 列向上移动 :(。我尝试了一些 push/pulls 但是当我这样做时当我使用它们时，似乎无法让 2/3 相互叠加。

Answer 1

当然可以。您只需要将第二列和第三列拆分为各自的列和自己的行。然后你可以推拉第四列和合并的第二列和第三列。

http://jsfiddle.net/jxu42vst/

<div class="container">
    <div class="row">
        <div class="box-1 col-sm-12">1</div>
        <div class="col-sm-4 col-sm-push-8">
            <div class="row">
                <div class="box-2 col-sm-12">2</div>
                <div class="box-3 col-sm-12">3</div>
            </div>
        </div>
        <div class="box-4 col-sm-8 col-sm-pull-4">4</div>
    </div>
</div>

Bootstrap 3 响应能力 -- 在网格中上下移动模块

Bootstrap 3 responsiveness -- moving modules up and down in the grid

css

twitter-bootstrap