Twitter bootstrap 跨行重新排列引导3列

我有一个布局，看起来像这样：

对于xs md，这是：

[ 1][ 2][ 3][ 4]
[ 7][ 8][ 9][10]
[ 5][ 6][11][12]

问题是，当我尝试添加推拉时，我得到了如下结果：

---

所以，推拉动作不会让跳水员绕到下一条线，而只是把他们推得更多。有没有办法对这些行中的列重新排序？

您可以将行分成两列（宽度8和宽度4），如下所示：

<div class="container">
  <div class="row">
    <div class="col-md-8">
      <div class="col-xs-3 col-lg-3"><div class="well">1</div></div>
      <div class="col-xs-3 col-lg-3"><div class="well">2</div></div>
      <div class="col-xs-3 col-lg-3"><div class="well">3</div></div>
      <div class="col-xs-3 col-lg-3"><div class="well">4</div></div>
      <div class="col-xs-3 col-lg-3"><div class="well">7</div></div>
      <div class="col-xs-3 col-lg-3"><div class="well">8</div></div>
      <div class="col-xs-3 col-lg-3"><div class="well">9</div></div>
      <div class="col-xs-3 col-lg-3"><div class="well">10</div></div>  
    </div>
    <div class="col-md-4">
      <div class="col-xs-3 col-md-6 col-lg-6"><div class="well">5</div></div>
      <div class="col-xs-3 col-md-6 col-lg-6"><div class="well">6</div></div>
      <div class="col-xs-3 col-md-6 col-lg-6"><div class="well">11</div></div>
      <div class="col-xs-3 col-md-6 col-lg-6"><div class="well">12</div></div>
    </div>
  </div>
</div>

1.
2.
3.
4.
7.
8.
9
10
5.
6.
11
12

你不能把5放在10之后，以此类推。您很可能可以使用flexbox——旧浏览器上的支持不受支持。谢谢通过一个小的修改就可以实现这一点：将外部行更改为8列和4列中的两行，以消除它们之间多余的边沟。

[ 1][ 2][ 3][ 4]
[ 7][ 8][ 9][10]
[ 5][ 6][11][12]

<div class="container">
  <div class="row">
    <div class="col-xs-3 col-lg-2"><div class="well">1</div></div>
    <div class="col-xs-3 col-lg-2"><div class="well">2</div></div>
    <div class="col-xs-3 col-lg-2"><div class="well">3</div></div>
    <div class="col-xs-3 col-lg-2"><div class="well">4</div></div>
    <div class="col-xs-3 col-lg-2 col-xs-push-12 col-lg-push-0"><div class="well">5</div></div>
    <div class="col-xs-3 col-lg-2 col-xs-push-12 col-lg-push-0"><div class="well">6</div></div>
    <div class="col-xs-3 col-lg-2 col-xs-pull-6 col-lg-pull-0"><div class="well">7</div></div>
    <div class="col-xs-3 col-lg-2 col-xs-pull-6 col-lg-pull-0"><div class="well">8</div></div>
    <div class="col-xs-3 col-lg-2 col-xs-pull-6 col-lg-pull-0"><div class="well">9</div></div>
    <div class="col-xs-3 col-lg-2 col-xs-pull-6 col-lg-pull-0"><div class="well">10</div></div>
    <div class="col-xs-3 col-lg-2"><div class="well">11</div></div>
    <div class="col-xs-3 col-lg-2"><div class="well">12</div></div>
  </div>
</div>

        [ 1][ 2][ 3][ 4]
        [ 7][ 8]        [ 5][ 6]
[ 9][10]        [11][12]

<div class="container">
  <div class="row">
    <div class="col-md-8">
      <div class="col-xs-3 col-lg-3"><div class="well">1</div></div>
      <div class="col-xs-3 col-lg-3"><div class="well">2</div></div>
      <div class="col-xs-3 col-lg-3"><div class="well">3</div></div>
      <div class="col-xs-3 col-lg-3"><div class="well">4</div></div>
      <div class="col-xs-3 col-lg-3"><div class="well">7</div></div>
      <div class="col-xs-3 col-lg-3"><div class="well">8</div></div>
      <div class="col-xs-3 col-lg-3"><div class="well">9</div></div>
      <div class="col-xs-3 col-lg-3"><div class="well">10</div></div>  
    </div>
    <div class="col-md-4">
      <div class="col-xs-3 col-md-6 col-lg-6"><div class="well">5</div></div>
      <div class="col-xs-3 col-md-6 col-lg-6"><div class="well">6</div></div>
      <div class="col-xs-3 col-md-6 col-lg-6"><div class="well">11</div></div>
      <div class="col-xs-3 col-md-6 col-lg-6"><div class="well">12</div></div>
    </div>
  </div>
</div>