Пользовательские Bootstrap строки и столбцы сетки

Question

Я новичок в bootstrap, как получить этот макет в сетке bootstrap 4? Я не вижу областей, отмеченных красным

До сих пор я пробовал ниже

<div class="row">
    <div class="col-md-6">
    </div>
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-12">
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
            </div>
        </div>
    </div>
</div>

Answer 1

Надеюсь, это поможет -:

<div class="container">
  <div class="row green" style="height: 50px;"></div>  
  <div class="row">
    <div class="col-sm-6 red" style="height: 100px;"></div>
    <div class="col-sm-6">
      <div class="row yellow" style="height: 50px;">
      </div>
      <div class="row blue" style="height: 50px;">
      </div>
    </div>
  </div>
</div>

<style>
  .green{
    background: green;
  }
  .red{
    background: red;
  }
  .yellow{
    background: yellow;
  }
  .blue{
    background: blue;
  }
</style>