Bootstrap 3：更改多个列的顺序

Question

你好引导社区，

虽然我已经尝试了好几天了，但我可以想象使用推拉命令在引导程序 3 中交换多个列，但我无法让 md 屏幕大小正常工作。

这里是代码：http://jsbin.com/dipel/3/embed?html,css,output

对于 xs 尺寸（没问题）：
所有框都获得全屏宽度
盒子1
盒子2
Box3
盒子4

对于 sm 尺寸（没问题）：
最后两个盒子互换并并排
盒子1
盒子2
方框4 |盒子3

对于 md-size（不知道如何交换）：
这是我的问题。我无法让此布局正确交换位置。
方框1 | Box3
方框4 |盒子2

因此我的问题是：这种布局通常可以在 bootstrap 3 中使用吗？如果可以，具体如何？
任何想法如何解决这个问题？

在此先感谢

斯蒂芬

这是我的代码示例：http://jsbin.com/dipel/3/embed?html,css,output

Answer 1

我建议使用 2 个单独的行，然后使用 col-md-6（这将是整个容器的 50%）。

例如：

<div class="row">
  <div class="col-md-6">
    <div class="box1"></div>
  </div>
  <div class="col-md-6">
    <div class="box2"></div>
  </div>
</div>

<div class="row">
  <div class="col-md-6">
    <div class="box3"></div>
  </div>
  <div class="col-md-6">
    <div class="box4"></div>
  </div>
</div>

这是一个演示：

http://jsbin.com/tuhiqoda/1/edit