如果元素以不同的高度和宽度平铺，如何使用Bootstrap 3网格

Question

我最近使用Bootstrap 3进行了几个项目，并且喜欢它的工作方式。不过我现在有一些问题，我真的不知道如何使用它。如果我有一些平铺的div，我想知道如何更改顺序或不同断点的网格中的位置是最好的方法。我做了一个简单的可视化来解释我的问题：

在左侧，您可以在大型桌面上看到状态，在右侧看到下一个较小断点的状态。我目前遇到的问题是：如何处理blue上的.row1 div，在新行右侧的red旁边显示.row2 div 。 在断点处，红色div可能会移动到另一行吗？

我正在寻找一种Bootstrap / CSS唯一的方法，但如果没有JS / jQuery肯定没有用，我也会很感激这些建议。

希望你明白我的观点。谢谢！

编辑：@Danko的答案中我的另一个问题的相关图片，就是如何在不同的断点上切换图块。

Answer 1

您需要管理相同的逻辑，但不要将设计分为两行，只需一行：

<div class="container">
    <div class="row">
      <div class="col-md-8 col-lg-6 B"></div>
      <div class="col-md-4 col-lg-3 G"></div>
      <div class="col-md-4 col-lg-3 G"></div>
      <div class="col-md-12 col-lg-6 O"></div>
    </div>
</div>

选中 DemoBootply