Как сохранить сетку столбцов, не ломаясь на новый ряд?

Question

Я пытаюсь настроить сетку изображений, все устраивает нормально, пока я не установлю последний столбец, вместо того, чтобы остаться в той же строке, он ломает линию и идет вниз.

Я пытался использовать меньшие столбцы вместоиз 2 col-6 в том же ряду один маленький и один больший или даже не соответствующий максимуму 12, col-4 col-4, col-5 col-6 ... Во всех случаях сетка обрывается в новом ряду.

<div class="row">
    <div class="col-6" style="width:100%;"><img src="image.png"  
    style="width: 100%" alt=""></div>
    <div class="col-6">
        <div class="col-12" style="width: 100%"><img src="image.png" 
        style="width: 100%" alt=""></div>
        <div class="col-6" style="width:100%;"><img src="image.png" 
        style="width: 100%" alt=""></div>
        <div class="col-6" style="width:100%;"><img src="image.png" 
        style="width: 100%" alt=""></div>
    </div>
</div>

результат, который я хочу, выглядит примерно так;

но результат, который я получаю, примерно такой;

Answer 1

Просто нужно немного подправить структуру DOM, чтобы получить желаемый результат. Да, и в вашем примере вам не хватает закрывающего тега для родительской строки. Приветствия;

.row {
  min-height: 20rem;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
  <div class="row">
    <div class="col-6" style="background:blue">
    </div>
    <div class="col-6">

      <div class="row">
        <div class="col-12" style="background:green">
        </div>
        <div class="col-6" style="background:orange">
        </div>
        <div class="col-6" style="background:red">
        </div>
      </div>

    </div>
  </div>
</div>

Answer 2

Есть несколько вещей, которые необходимо учитывать при организации вашего кода.- добавление встроенной ширины 100% вызовет проблемы и заменит классы.- добавление строки облегчит чтение, будет более понятным

<div class="container-fluid">
  <div class="row">
    <div class="col-6"></div>
    <div class="col-6">
        <div class="row">
          <div class="col-12"></div>
        </div>
        <div class="row">
           <div class="col-6"></div>
           <div class="col-6"></div>
        </div>
    </div>
  </div>
</div>