Css 自定义引导网格行和列

我是bootstrap的初学者，如何在Bootstrap4网格中获得这个布局？我看不到红色标记的区域

到目前为止，我已经尝试了下面的方法

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

希望这有帮助-：

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

格林先生{
背景：绿色；
}
瑞德先生{
背景：红色；
}
黄先生{
背景：黄色；
}
蓝先生{
背景：蓝色；
}

---

这有帮助吗？