html - 使用 twitter bootstrap 3 折叠网格

Question

我有一个 1 行 4 列网格。我怎么把它弄成这样。

大 1 行 4 列

中 2行2列

小 2行2列

Xtra Small 4 行 1 列

任何帮助，将不胜感激。谢谢

Answer 1

尝试这个..

<div class="container">
 <div class="row">
    <div class="col-lg-3 col-sm-6">x</div>
    <div class="col-lg-3 col-sm-6">x</div>
    <div class="col-lg-3 col-sm-6">x</div>
    <div class="col-lg-3 col-sm-6">x</div>
  </div>
</div>

在这种情况下，您只需要指定，col-sm-*因为 sm 和 md 是相同的布局，并且网格会在最小的设备（xs）上自动堆叠成单个 col。

演示：http ://bootply.com/86156