如何使用Bootstrap实现跨多行的Div网格布局？

完全可以用Bootstrap实现你要的这种网格布局，你之前的代码问题在于把三个同级列放在同一行里——Bootstrap网格每行总宽度是12份，前两个col-md-4加起来占8份，第三个col-md-8占8份，总和超过12，所以会被挤到下一行，自然达不到预期效果。

正确实现思路：嵌套行结构 #

把需要上下排列的元素（比如4、5）放在一个左侧列内，通过嵌套row让它们垂直堆叠；右侧单独放跨多行的元素（比如6），这样右侧列会自动匹配左侧列的总高度，实现跨多行的视觉效果。

4、5、6区域的代码示例：

<div class="row">
  <!-- 左侧列：占4份，内部嵌套行放置4和5 -->
  <div class="col-sm-4 col-md-4">
    <div class="row">
      <div class="col-12">4</div>
      <div class="col-12">5</div>
    </div>
  </div>
  <!-- 右侧列：占8份，自动匹配左侧高度 -->
  <div class="col-sm-8 col-md-8">6</div>
</div>

同理实现Div1、2、3区域：

如果是Div1在左，Div2、3在右上下排列的结构，代码如下：

<div class="row">
  <div class="col-sm-4 col-md-4">1</div>
  <div class="col-sm-8 col-md-8">
    <div class="row">
      <div class="col-12">2</div>
      <div class="col-12">3</div>
    </div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者user18363037