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

Question

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

在左侧,您可以在大型桌面上看到状态,在右侧看到下一个较小断点上的状态.我目前遇到的问题是:我如何处理bluediv .row1,在新行的右侧将reddiv放在.row2旁边.在断点处,红色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