在小型设备上将 12 列 div 下推到新行

Question

我想知道是否可以将 12 列 div 向下推到小型设备上的新行，然后使用 Bootstrap 3 将 12 列 div 拉到上一个 div 的位置。
我知道如果两个 div 在大型设备上总和为 12 列，则可以做到这一点，但我无法让 push 和 pull 在 12 列 div 上工作。

下面是代码 sn-p 在col-md-8 和col-md-4 情况下可以正常工作，但在col-md-12 和col-md-12 情况下不能正常工作，这是我的场景中所需的情况。

<div class="container">
<h1>#14</h1>
<div class="row">  
    <div class="col-md-4 col-md-push-8 col-xs-12">
      <div class="row">
        <div class="col-xs-12 col-md-12"><div class="well">3 (pull to top)</div></div>
      </div>
    </div>
    <div class="col-md-8 col-md-pull-4 col-xs-12">
       <div class="row">
        <div class="col-xs-12"><div class="well">1 (push down)</div></div> 
       </div>
    </div>  
    <div class="col-xs-12">
       <div class="well">2</div>
    </div>  
</div>

这是一个代码笔：

请参阅 CodePen 上 Muhammad Arslan Aslam (@arximughal) 的 Pen Bootstrap Columns Pull/Push。

请纠正我哪里弄错了？

这是我需要的粗略模拟：

Answer 1

对于这种情况，您可以将 flexbox 与 order 一起使用。

https://codepen.io/jacobgoh101/pen/wpaRmr

HTML

<div class="row">
  <div class="col-xs-12 col-sm-4 div-1">1</div>
  <div class="col-xs-12 col-sm-4 div-2">2</div>
  <div class="col-xs-12 col-sm-4 div-3">3</div>
</div>

CSS

.row > div {
  border: 1px solid #000;
}

@media (max-width: 767px) {
  .row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .row .div-1 {
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
  }
  .row .div-2 {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
  .row .div-3 {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
}