Bootstrap 4 Попытка получить этот формат сетки

Question

Попытка получить этот формат сетки

Здравствуйте, я в настоящее время новичок в использовании начальной загрузки 4 и пытаюсь получить формат выше. Это то, что я сейчас пытаюсь до сих пор ....

<div class="container">

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

     <div class="col-md-8">2</div>
    <div class="col-md-8 ">3</div>
</div> 
</div>

Answer 1

.one, .two, .three{
   border: solid 2px gray;
   min-height: 150px;
   font-weight: bold;
}

.one{
   background: lightblue;
}

.two{
   background: lightgreen;
}

.three{
   background: pink;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-sm-5 one">1</div>
    <div class="col-sm-7">
      <div class="row">
        <div class="col-sm-8 two">2</div>
      </div>
      <div class="row">
        <div class="col-sm-8 three">3</div>
      </div>
    </div>
  </div>
</div>

Answer 2

Вот, пожалуйста!

.content {
  min-height: 100px;
  background: #ccc;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container">

  <div class="row">
    <div class="col-4">
      <div class="row h-100">
        <div class="col-12 h-100">
          <div class="content h-100">1</div>
        </div>
      </div>
    </div>
    <div class="col-8">
      <div class="row">
        <div class="col-12 mb-3 pl-0">
          <div class="content">2</div>
        </div>
        <div class="col-12 pl-0">
          <div class="content">3</div>
        </div>
      </div>
    </div>
  </div>
  
</div>