Bootstrap网格 - 列首先？

Question

我对Bootstrap相当新，遇到了一个我认为非常简单的问题。也许是有足够经验的Bootstrap的人。

如果我有一排12列应该以单列布局堆叠在一起，在两列布局中分为2 x 6，在三列布局中分为3 x 4，结果通常是：

1
2
3
4
5
6
7
8
9
10
11
12

和

1    2
3    4
5    6
7    8
9    10
11   12

和

1    2    3
4    5    6
7    8    9
10   11   12

然而，我想要的是：

1
2
3
4
5
6
7
8
9
10
11
12

和

1    7
2    8
3    9
4    10
5    11
6    12

和

1    5    9
2    6    10
3    7    11
4    8    12

使用标准的Bootstrap类有没有简单的方法来实现这一点？

这里有一个这样的布局示例：http://bildarkivet.orsa.se在这个站点上，12个输入元素按CSS列计数属性排序到列中，但是能够合并一个类似的排序会很好样式进入基于Bootstrap的站点。

Answer 1

如果不使用bootstrap的可见性类，则无法创建布局。

这是使用隐藏和可见类的fiddle来实现所需的结果。

<div class="col-md-6 col-lg-4">
  <div class="row">
  <div class="col-sm-12">1</div>
  <div class="col-sm-12">2</div>
  <div class="col-sm-12">3</div>
  <div class="col-sm-12">4</div>
  <div class="col-sm-12 visible-md-block">5</div>
  <div class="col-sm-12 visible-md-block">6</div>
  </div>
</div>
<div class="col-md-6 col-lg-4 hidden-md">
  <div class="row">
 <div class="col-sm-12">5</div>
  <div class="col-sm-12">6</div>
  <div class="col-sm-12">7</div>
  <div class="col-sm-12">8</div>
  </div>
</div>
<div class="col-md-6 col-lg-4">
    <div class="row">
  <div class="col-sm-12 visible-md-block">7</div>
  <div class="col-sm-12 visible-md-block">8</div>
  <div class="col-sm-12">9</div>
  <div class="col-sm-12">10</div>
  <div class="col-sm-12">11</div>
  <div class="col-sm-12">12</div>
  </div>
</div>

fullscreen reuslt

hidden上的中间div为tablets，另一列中的相应div使用visible-md-block类显示