Html 如何保持一个网格的科尔不打破新的一排？

我正在尝试建立一个图像网格，所有的东西都安排得很好，直到我设置最后一列，而不是停留在同一行，它打破了这一行并下降

我尝试在同一行中使用较小的列，而不是2列，一小一大，甚至不匹配12个最大列，第4列第4列第5列第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>

我想要的结果是这样的；

但我得到的结果是这样的；

---

只需稍微调整一下DOM结构就可以得到您想要的结果。哦，在您的示例中，缺少父行的结束标记。干杯

.row{
最小高度：20雷姆；
}

---

只需稍微调整一下DOM结构就可以得到您想要的结果。哦，在您的示例中，缺少父行的结束标记。干杯

.row{
最小高度：20雷姆；
}

---

在组织代码的过程中，有几件事需要解决。 -添加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>

---

在组织代码的过程中，有几件事需要解决。 -添加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>

上面的代码会产生这种情况（请注意水槽）。请注意，您也缺少一个结束div。请尝试

清除：在绿色
div
之后同时执行这两个操作（请注意水槽）。请注意，您也缺少一个结束div。请在绿色
div