Twitter bootstrap 在bootstrap3中重新排序列

我正在使用Bootstrap3对列进行重新排序，并得到一些不需要的结果。我曾多次尝试使用推/拉、添加包装器和添加行将它们放置在所需的位置，但都没有成功。以下是中等屏幕上的布局：

    |A| B |
    | |C|D|

例如：

以及守则：

<div class="container" id="main">
    <div class="row">
        <div class="col-md-4 col-sm-6" id="red">A<br><br></div>
        <div class="col-md-8 col-sm-12" id="blue">B</div>
        <div class="col-md-4 col-sm-6" id="green">C</div>
        <div class="col-md-4 col-sm-6" id="yellow">D</div>
    </div>
</div>

例如：

小屏幕上第一个链接中的代码会发生什么情况：

    |  B  |
    | A| C|
    |  | D|

    | A|
    | A|
    |  B  |
    | C| D|

使用推/拉操作时，小屏幕上会发生什么情况：

       | A|
       |  |
    B  |
    | C| D|

（A向右推，B向左部分拉出容器。）

---

仅使用引导3可以实现所需的布局吗？如何操作？

推拉有时在引导过程中会很棘手。看看这个，关于push和pull类的使用，它有很多问题/解决方案。

我找到了一个解决方案，它包括分解a列，修改对象的初始顺序，然后使用push/pull将它们全部排序。如果有人找到更好的，请告诉我。如果我有更好的东西，我会继续努力并发布

<div class="container" id="main">
    <div class="row">
        <div class="col-md-8 col-md-push-4 col-sm-12" id="blue">B</div>
        <div class="col-md-4 col-md-pull-8 col-sm-6" id="red">A1</div>
        <div class="col-md-4 col-md-push-4 col-sm-6" id="green">C</div>
        <div class="col-md-4 col-md-push-4 col-sm-6 col-sm-push-6" id="yellow">D</div>
        <div class="col-md-4 col-md-pull-8 col-sm-6 col-sm-pull-6" id="red">A2</div>
    </div>
</div>

B
A1
C
D
A2

和一个链接：

---

我仔细阅读了这个链接，发现它非常有用。我认为那里的例子暗示了一些类似于我得出的答案。