Bootstrap 5布局求助：列高度异常与响应式位置调整问题

问题根源 #

你遇到的问题来自两个点：

1. Bootstrap 的 row 默认是 Flex 布局，col 元素会被自动拉伸到同 row 内最高元素的高度，所以红色盒子所在的 col-md-8 被蓝色盒子的 300px 高度拉成了等高，导致后续独立 row 里的绿色盒子只能排在整个高列的下方，无法紧贴红色盒子。
2. 拆分 row 的结构加上 order 类使用不当，没法在同一个容器内控制元素的响应式排列顺序，达不到预期布局。

修正后的代码方案 #

把三个盒子放在同一个 row 内，用 Bootstrap 的 order 类控制不同屏幕下的排列顺序，同时给红色盒子所在列添加 align-self-start 避免被拉伸：

<div class="container-fluid">
  <div class="row">
    <!-- 红色盒子：大屏占8列，小屏排第1位 -->
    <div class="col-md-8 order-md-1 order-1 align-self-start">
      <div style="height:100px;width:100px;background-color:red"></div>
    </div>
    <!-- 蓝色盒子：大屏占4列，小屏排第2位 -->
    <div class="col-md-4 order-md-3 order-2">
      <div style="height:300px;width:100px;background-color:blue"></div>
    </div>
    <!-- 绿色盒子：大屏占8列（自动换行到红色下方），小屏排第3位 -->
    <div class="col-md-8 order-md-2 order-3">
      <div style="height:100px;width:100px;background-color:green"></div>
    </div>
  </div>
</div>

布局效果说明 #

• 大屏（md及以上尺寸）：红色盒子占左侧8列，蓝色盒子占右侧4列；绿色盒子因为是 col-md-8 会自动换行到红色盒子正下方，且红色列因 align-self-start 不会被蓝色盒子的高度拉伸，绿色盒子能紧贴红色盒子。
• 小屏（md以下尺寸）：三个盒子按 order-1（红）、order-2（蓝）、order-3（绿）的顺序垂直排列，蓝色盒子自动移到红色盒子下方。

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