Question

我们，我正在开发一个Web应用程序，我正在使用Bootstrap 3 我有一个项目列表：A，B，C，D，E，F，G，H，I，L，M

我想代表如下列表：

对于大型设备：
A C E G I M
B D F H L

对于中型或大型设备：
A E I
B F L
C G M
D H

对于小型设备：
A G
B H
C I
D L
E M
˚F

对于超小型设备：一个
乙
ç
d
Ë
˚F
摹
^ h
我
大号
M

Answer 1

如果你的断点少于你所要求的（3对4），你可以这样做：

<div class="container">
  <div class="col-sm-6">
    <div class="col-md-6">
      <div class="col-xs-12">A</div>
      <div class="col-xs-12">B</div>
      <div class="col-xs-12">C</div>
    </div>
    <div class="col-md-6">
      <div class="col-xs-12">D</div>
      <div class="col-xs-12">E</div>
      <div class="col-xs-12">F</div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="col-md-6">
      <div class="col-xs-12">G</div>
      <div class="col-xs-12">H</div>
      <div class="col-xs-12">I</div>
    </div>
    <div class="col-md-6">
      <div class="col-xs-12">J</div>
      <div class="col-xs-12">K</div>
      <div class="col-xs-12">L</div>
    </div>
  </div>

我建议3对4断点的原因是，否则你没有一个列中最低的公共数（3，在这种情况下是3/6/12）元素，你需要找到一个使异常值从一列移动到另一列的方式（即3/4/6/12变得混乱，其中3与4相遇）。有可能克服，div设置为hidden-* + clearfix穿插，但它非常复杂，可能不值得。

注意：通常你会想在你的嵌套列之间添加.row，但是在这种情况下它也使事情变得复杂，所以你可能想要一些自定义CSS来否定嵌套创建的复合填充，但是你可以也很好......

PS - bootply现在是片状的，所以无法保存我的DEMO，但它确实有效！

Answer 2

您应该阅读http://getbootstrap.com/css/#responsive-utilities

<div class="col-lg-*></div>用于大屏幕 <div class="col-md-*></div>用于中等屏幕小屏幕<div class="col-sm-*></div> <div class="col-xs-*></div>用于额外的小屏幕

Bootstrap 3：列在多列上

2 个答案: