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>

在移动设备上-视口（viewport）我会变成这样：

div1 div2 div3 div4 div5 div6 

在小屏幕视口中：

div1 div2 div3
div4 div5 div6

我该如何重排列以在小屏视图下得到以下结果：

div1 div3 div5
div2 div4 div6

换句话说，每一列偶数行必须下移，而每一列奇数行必须保持不动。这是否可能？

- user3292126

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演示。

- James Donnelly

---

@user3292126 不用担心。当你有机会的时候，请记得将此标记为已接受的答案以关闭问题。 :-) - James Donnelly

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

- cvrebert