Bootstrap 好奇网格布局

Question

我想知道 bootstrap 是否可以做这样的事情？

当屏幕变小时，小立方体会移到一列，然后右边的大立方体会移到底部。

我正在用 AngularJS 和 Laravel 创建一个 webApp 只是为了好奇的人。

Answer 1

没问题：

HTML:

<div class="container">
  <div class="row">
    <div class="col-md-9">
      <div class="row">
        <div class="col-md-4">
          <div class="block"></div>
        </div>
        <div class="col-md-4">
          <div class="block"></div>
        </div>
        <div class="col-md-4">
          <div class="block"></div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-4">
          <div class="block"></div>
        </div>
        <div class="col-md-4">
          <div class="block"></div>
        </div>
        <div class="col-md-4">
          <div class="block"></div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-4">
          <div class="block"></div>
        </div>
        <div class="col-md-4">
          <div class="block"></div>
        </div>
        <div class="col-md-4">
          <div class="block"></div>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="block block-lg"></div>
    </div>
  </div>
</div>

CODEPEN