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

Question

我想知道是否有可能将12列div推下来，直到小型设备上的新行，然后在之前的div中使用Bootstrap 3拉出12列div。
我知道如果两个div在大型设备上总计达到12列，就可以完成，但我不能让push和pull在12列div上工作。

以下是在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>

这是以下的代码：

在Bootstrap Columns Pull/Push上查看Muhammad Arslan Aslam（@arximughal）的笔CodePen。

请纠正我在哪里弄错了？

这是对我需要的粗略嘲笑：

Answer 1

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

Navigator#sendBeacon

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;
  }
}