引导网格 - 首先是列？

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 column-count 属性排序到列中，但是如果能够将类似的排序样式合并到一个基于 Bootstrap 的网站。

Answer 1

如果不使用引导程序的可见性类，则无法创建布局。

这是一个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

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