Custom Bootstrap grid rows and cols

Question

I am beginner in bootstrap, how to get this layout in bootstrap 4 grid? I do not see the areas marked in red

So far i have tried the below

<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

Hope this helps -:

<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>