如何使用bootstrap创建具有2列和每个项目不同高度的投资组合网格

Question

<!-- PORTFOLIO SECTION -->
<div class="container-fluid">
      <div class="row">
        <div class="col-lg-6 col-md-6">
          <div class="row">
            <div id="col-1" class="col-lg-12 col-md-12">
            <div class="wrapper">
              <img src="http://placehold.it/960x960" class="img-responsive img-case" alt="Responsive image" alt width="100%">
            </div>
            </div>
            <div id="col-2" class="col-lg-12 col-md-12">
            <div class="wrapper">
              <img src="http://placehold.it/960x700" class="img-responsive img-case" alt="Responsive image" alt width="100%">
            </div>
            </div>
          </div>
        </div>
        <!-- END First row, left column with 2 items nested -->
        <!-- START First row, right column with 2 items nested -->
        <div class="col-lg-6 col-md-6">
          <div class="row">
            <div id="col-3" class="col-lg-12 col-md-12">
            <div class="wrapper">
              <img src="http://placehold.it/960x700.png" class="img-responsive img-case" alt="Responsive image" alt width="100%">
            </div>
            </div>
            <div id="col-4" class="col-lg-12 col-md-12">
            <div class="wrapper">
              <img src="http://placehold.it/960x960" class="img-responsive img-case" alt="Responsive image" alt width="100%">
            </div>
            </div>
          </div>
        </div>
      </div>  

我正在尝试创建一个仅包含8个项目的投资组合网格视图，并坐在分隔屏幕的两列中。每个项目都有不同的高度。由于它只有8个项目，我认为砌体对于像我这样的初学者来说太复杂和沉重。我在这里使用bootstrap和css编码就像嵌入代码一样。在这种虚拟方式中，它可以分为两列，分为屏幕和每列中的4个项目，用于桌面版本。

但是，当它转到移动版时，堆叠顺序如下图所示mobile stacking sequence illustrations。我标记了我想在插图中实现的顺序。

任何人都可以就如何实现这一点给我建议吗？如果您认为砌体更容易实现，我也愿意接受反馈，请告诉我。 谢谢！