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

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