Javascript 一个元素固定的响应网格（相对于网格中的第一个元素）

我有一个水平横幅，我想保持在大正方形的正下方（网格左上角，见图）。这意味着，在网格中，在我有横幅之前，我将有1个（大）+6个（常规）网格元素

如果有人放大页面，或者以较小的分辨率查看，我希望将水平横幅保持在大正方形的正下方，如图所示

而且，如果用户使用的分辨率只能容纳大正方形，而不能容纳规则正方形，那么我想将所有规则正方形都放在横幅后面，如图所示

我怎样才能做到这一点

我使用bootstrap3和Angular

多谢各位

---

最近我遇到了像你一样的问题

大盒子和小盒子需要用2个元素分开（我使用div）

因此，您有

div>big\u box

+

div>small\u box*6

。这样，您可以轻松更改宽度

使用这些类：

列lg-表示宽度=1200px
col md-代表宽度=992px
列sm-表示宽度=768px
列xs-代表宽度<768px

了解大小后，您需要了解引导将块分为12个部分。
所以，使用第一个例子，看起来大的盒子是4或5，小的盒子是8或7

所以它看起来像：

<div class="col-lg-4">
    <div class="big_box"></div>
</div>
<div class="col-lg-8">
    <div class="small_box"></div>
    ...
    <div class="small_box"></div>
</div>

...

至于框的大小，或者应该隐藏哪个块，最好根据您的选择使用您应该查看的

。它会根据用户视口自动“重新排序”DOM