Html 自举6列响应

我正在为我的设计使用自举布局，并将使其响应迅速并节省所需的订单。例如：

<div class="row">
   <div class="col-sm-4 col-md-2" >div1</div>
   <div class="col-sm-4 col-md-2" >div2</div>
   <div class="col-sm-4 col-md-2" >div3</div>
   <div class="col-sm-4 col-md-2" >div4</div>
   <div class="col-sm-4 col-md-2" >div5</div>
   <div class="col-sm-4 col-md-2" >div6</div>
</div>

在sm-视口上：

div1 div2 div3
div4 div5 div6

div1 div3 div5
div2 div4 div6

如何在sm视口中对列进行重新排序以获得如下效果：

div1 div2 div3
div4 div5 div6

div1 div3 div5
div2 div4 div6

---

换言之，每一列偶数必须下降，每一列奇数必须保持上升。有可能吗？

只需引入一组新的列：

<div class="row">
    <div class="col-sm-4 col-md-4">
        <div class="row">
            <div class="col-sm-12 col-md-6" >div1</div>
            <div class="col-sm-12 col-md-6" >div2</div>
        </div>
    </div>
    <div class="col-sm-4 col-md-4">
        <div class="row">
            <div class="col-sm-12 col-md-6" >div3</div>
            <div class="col-sm-12 col-md-6" >div4</div>
        </div>
    </div>
    <div class="col-sm-4 col-md-4">
        <div class="row">
            <div class="col-sm-12 col-md-6" >div5</div>
            <div class="col-sm-12 col-md-6" >div6</div>
        </div>
    </div>
</div>

第一组
第二组
第三组
第四组
第五组
第六组

.

使用应做到以下几点：

<div class="row">
  <div class="col-sm-4 col-md-2" >div1</div>
  <div class="col-sm-4 col-md-2 col-md-push-2" >div3</div>
  <div class="col-sm-4 col-md-2 col-md-push-6" >div5</div>
  <div class="col-sm-4 col-md-2 col-md-pull-4" >div2</div>
  <div class="col-sm-4 col-md-2 col-md-pull-4" >div4</div>
  <div class="col-sm-4 col-md-2" >div6</div>
</div>

第一组
第三组
第五组
第二组
第四组
第六组

---

代码笔：

@user3292126别担心。请记住将此标记为已接受的答案，以便在有机会时结束此问题。：-）