Daha iyi bir mantığı elbette vardır fakat responsive yapacağın için bu işini görecektir...

Mesela bu daha pratik...


(kutular arasında çok fazla boşluk olduğu için pr, pl, px ekledim)

<div class="row">
  <div class="col-12">
    <div class="box bg-danger">1</div>
  </div>
  <div class="col-md-4 pr-2">
    <div class="box bg-danger">2</div>
  </div>
  <div class="col-md-4 px-2">
    <div class="box bg-danger">3</div>
  </div>
  <div class="col-md-4 pl-2">
    <div class="box bg-danger">4</div>
  </div>
  <div class="col-md-4 pr-2">
    <div class="row">
      <div class="col-12">
        <div class="box bg-danger">5</div>
      </div>
      <div class="col-12">
        <div class="box bg-danger">6</div>
      </div>
    </div>
  </div>
  <div class="col-md-4 px-2">
    <div class="box box--lg bg-danger">7</div>
  </div>
  <div class="col-md-4 pl-2">
    <div class="row">
      <div class="col-12">
        <div class="box box--sm bg-danger">8</div>
      </div>
      <div class="col-12">
        <div class="box box--sm bg-danger">9</div>
      </div>
      <div class="col-12">
        <div class="box box--sm bg-danger">10</div>
      </div>
    </div>
  </div>
</div>

.box {height:200px;margin-top:16px;}
.box--sm {height: 128px;}
.box--lg {height: 416px;}