Bootstrap 3:折叠时更改.col-X元素的垂直顺序

Question

在大型显示器上，我有以下布局：

AAA BBB
AAA CCC

(所有的A、B和C组成一个div，所以这里有3个元素)

现在，当它崩溃的时候，我希望它变成

BBB
AAA
AAA
CCC

我试着在HTML中以这种顺序指定元素，但是对于展开的视图，我所能得到的最好的结果是(使用.push-X类)

AAA BBB
AAA
    CCC

我能想到的唯一解决方案是用JS移动东西，或者在正确的位置有CCC的副本，并根据视口的大小显示和隐藏它们。

有没有更干净的方法来做这件事？

Answer 1

<div class="row">
   <div class="col-xs-12 col-md-6 col-md-push-6">BBB</div>
   <div class="col-xs-12 col-md-6 col-md-pull-6">AAA</div>
   <div class="col-xs-12 col-md-6 ">AAA</div>
   <div class="col-xs-12 col-md-6 ">CCC</div>
</div>

这会起作用的。

怎么做到的？...首先，你需要首先为移动端安排你的内容(所以考虑移动端是“自然”的顺序，即

BBB
AAA
AAA
CCC

然后，当您扩展到桌面时，您将获得以下内容：

BBB AAA  <--- wrong order
AAA CCC

因此，您需要通过将BBB内容推到右侧并将AAA内容拉到左侧来交换顺序

BBB------>.
.<------AAA