求助：Bootstrap响应式网格列布局异常，Action列被Image列换行清除

我完全懂你的需求啦——小屏上要垂直排列Header、Image、Action，大屏则左侧放Header，右侧垂直叠放Image、Action、另一个Image，同时得保证Action不会因为Image的固定高度被挤到Header下面。这个问题的核心是利用Bootstrap的网格嵌套和弹性布局特性来控制元素排列，避开默认的流式换行逻辑。

下面是具体的实现方案：

实现思路 #

1. 大屏（以md断点为例）：用主行拆分左右两栏，左侧Header占6列；右侧用一个6列的嵌套容器，把两个Image和Action按钮都放在这个容器里，确保它们始终在右侧区域内，不会换行到Header下方。
2. 小屏：借助Bootstrap的响应式列类，让所有元素自动占满100%宽度，垂直排列的顺序刚好符合你要的Header→Image→Action。
3. 固定高度与布局稳定：给Image设置固定高度，同时用d-flex flex-column让右侧容器保持垂直布局，保证Action不会被挤压错位。

完整代码示例 #

<div class="container mt-4">
  <div class="row">
    <!-- 左侧Header：小屏占满宽度，大屏占6列 -->
    <div class="col-12 col-md-6 bg-light p-4">
      <h2>1 Header（标题）</h2>
      <p>这里是Header的内容区域</p>
    </div>

    <!-- 右侧容器：小屏占满宽度，大屏占6列，垂直布局 -->
    <div class="col-12 col-md-6 d-flex flex-column gap-3">
      <!-- 第一个固定高度Image -->
      <div class="bg-secondary p-5 text-white" style="height: 200px;">
        2 Image（固定高度）
      </div>

      <!-- Action按钮：保持在两个Image中间，不会被换行清除 -->
      <div class="d-flex justify-content-center">
        <button class="btn btn-primary">3 Action Button（操作按钮）</button>
      </div>

      <!-- 第二个固定高度Image -->
      <div class="bg-secondary p-5 text-white" style="height: 200px;">
        2 Image（固定高度）
      </div>
    </div>
  </div>
</div>

代码细节解释 #

• 网格嵌套逻辑：右侧的col-md-6作为独立容器，内部用d-flex flex-column实现垂直堆叠，所有右侧元素都被限制在这个6列区域内，彻底避免了换行到Header下方的问题。
• 响应式适配：col-12 col-md-6的组合让元素在小屏自动铺满宽度，大屏自动拆分左右栏，无需额外的JS控制。
• 固定高度兼容：给Image设置height: 200px;后，右侧容器的弹性布局会自动调整内部元素间距，Action按钮的位置不会受Image高度影响。

如果需要更精准控制小屏的元素顺序，还可以给元素添加order-*类（比如Header加order-1、Image加order-2、Action加order-3），进一步明确排列优先级。

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