Bootstrap 6列响应

Question

我正在为我的设计使用Bootstrap布局,并且即将使其响应并节省所需的订单.例如,如下:

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

在md - viewports我会这样:

div1 div2 div3 div4 div5 div6 

在sm视口:

div1 div2 div3
div4 div5 div6

我怎么能重新排序列在sm-viewports上这样:

div1 div3 div5
div2 div4 div6

换句话说 - 每个偶数列都必须向下,每个奇数列都要保持不变.可能吗？

Answer 1

简单介绍一组新的列:

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

JSFiddle演示.

Answer 2

使用了col-*-push-N与col-*-pull-N列排序类应该做的伎俩：

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

CodePen：http：//codepen.io/anon/pen/eakfH