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

Mesela bu daha pratikmiş...

<div class="row">
  <div class="col-12">
    <div class="box bg-danger"><img src="https://images2.minutemediacdn.com/image/upload/c_crop,h_3236,w_5760,x_0,y_0/f_auto,q_auto,w_1100/v1554700227/shape/mentalfloss/istock-609802128.jpg" /></div>
  </div>
  <div class="col-md-4">
    <div class="box bg-danger">2</div>
  </div>
  <div class="col-md-4">
    <div class="box bg-danger">3</div>
  </div>
  <div class="col-md-4">
    <div class="box bg-danger">4</div>
  </div>
  <div class="col-md-4">
    <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">
    <div class="box box--lg bg-danger">7</div>
  </div>
  <div class="col-md-4">
    <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 {display:block;height:200px;margin-top:16px;}
.box--sm {height: 128px;}
.box--lg {height: 416px;}
.box img{width:100%;height:100%;display:block;object-fit:cover}