复杂的Bootstrap堆叠列

Question

我有一个网站，内容放在5个网格列上。在"xs"上，它是微不足道的：

|   1   |
|   2   |
|   3   |
|   4   |
|   5   |

https://i.stack.imgur.com/N8UjM.png

问题：如何在"sm"上使其看起来像这样？

|   1   ||              ||   2   |
|   4   ||       3      ||   5   |

https://i.stack.imgur.com/ysH79.png

Answer 1

您可以使用col-sm-offset-*类来安排这样的布局

<div class="row">
  <div class="col-sm-2">1</div>
  <div class="col-sm-2 col-sm-offset-8">2</div>
</div>
<div class="row">
  <div class="col-sm-2">4</div>
  <div class="col-sm-8">3</div>
  <div class="col-sm-2">5</div>
</div>

下面是一个例子http://plnkr.co/edit/RITUeIfyMzngqGhT5211?p=preview