Twitter bootstrap Bootstrap 4柔性网格

如何使用Bootstrap 4实现此布局

我试过这样做，但我不知道如何实现中心的大柱，并使所有其他柱的高度相同。它也不适合窗户

谢谢你的帮助

<div class="ds">
    <div class="row places">
      <div class="col-md-3 place logo">BLA</div>
      <div class="col-md-3 place black"><div class="black"><p class="justify-content-center align-self-center">Test</p></div></div>
      <div class="col-md-3 place">Instagram</div>
      <div class="col-md-3 place logo">BLA</div>
    </div>
    <div class="row places">
      <div class="col-md-3 place">
        WORK<br />
        IN<br />
        PROGRESS
      </div>
      <div class="col-md-6 place"></div>
      <div class="col-md-3 place">
        WORK<br />
        IN<br />
        PROGRESS
      </div>
    </div>
    <div class="row places">
      <div class="col-md-3 place">
        WORK<br />
        IN<br />
        PROGRESS
      </div>
      <div class="col-md-6 place">

      </div>
      <div class="col-md-3 place">
        WORK<br />
        IN<br />
        PROGRESS
      </div>
    </div>
    <div class="row places">
      <div class="col-md-3 place logo">BLA</div>
      <div class="col-md-3 place">
        WORK<br />
        IN<br />
        PROGRESS</div>
      <div class="col-md-3 place">
        WORK<br />
        IN<br />
        PROGRESS
      </div>
      <div class="col-md-3 place logo">BLA</div>
    </div>
  </div>

布拉
测试

一款图片分享应用
布拉
工作

在

进展
工作

在

进展
工作

在

进展
工作

在

进展
布拉
工作

在

进展
工作

在

进展
布拉

如果将“正在进行的工作”divs嵌套在

col-md-3

中，则可以获得类似的布局。您可能需要更改嵌套的

列的填充以适合您的布局/设计


.place{
边框：1px实心#e1e1；
}



布拉
测试

一款图片分享应用
布拉
工作

在

进展
工作

在

进展
工作

在

进展
工作

在

进展
布拉
工作

在

进展
工作

在

进展
布拉