bootstrap divlerin yükseklik sorunu

Merhaba arkadaşlar şöyle bir şey yapmaya çalışıyorum.

Aşağıda standart bootstrap div kodlarım var. Standart grid yapısı.
Aşağıdaki kodlardan rowları kaldırmak istiyorum. BÜtün divlerin yüksekliği aynı olunca sorun olmuyor fakat yükseklikleri farklı olduğu için birbirinin altına girmiyor. Divler arasında yükseklik boşlukları oluyor. Portfolyolardaki gibi divler alt alta gelecek şekilde nasıl sıralarım?

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-8">.col-md-8</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-8">.col-md-8</div>
</div>

css ile flex yapısını incelerseniz sorununuzu çözebilirsiniz.

Yapmak istediğim şöyle:

Aşağıdaki divler sayfada alt alta çıkıyor yan yana ikişer adet olacak şekilde. Fakat yükseklikleri farklı olduğu için satır aralarında boşluk varmış gibi duruyor. Bir div bittiğinde diğerinin hemen altına girmesini istiyorum.

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-8">.col-md-8</div>


  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>


  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>

  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-8">.col-md-8</div>
</div>