使Bootstrap列的高度不相等

Question

使用Bootstrap 4，我试图模拟以使列的高度不相等。

我可以向col添加样式属性，并以这种方式编辑列的高度，但是我希望高度是动态的，以适应其中的内容（自动）。

第二列的高度较小-我希望能够用其下的div填充该间隙。

这是我的代码：https://jsfiddle.net/ct1ajhbr/

    <div class="container">
  <div class="row">
    <div class="col-7 text-center">
     Col 7 <br>
     <img src="" alt="">
    </div>
    <div style="height: 165px;" class="col-5 text-center">
      Col 5
    </div>
    <div class="col-12 col-sm-5 text-center offset-md-7">
      Col 5
    </div>
  </div>
</div>