使用Bootstrap栅格系统实现响应式设计 移动端如何调换C、D块顺序

布局效果参考：

问题根源 #

原有代码无法调整C、D块顺序的核心原因是两个块不属于同一个父flex容器，Bootstrap内置的order-*排序类仅对同一父元素下的直接子元素生效，因此需要先调整DOM结构实现同层级控制。

实现思路 #

• 重构DOM结构，将C、D块放在同一父容器下，保留A、B块的原有布局层级
• 使用Bootstrap响应式order-*类配置排序规则：
  • 移动端（屏幕宽度<992px，即小于lg断点）：C块order值小于D块，实现C排在D前面
  • 桌面端（屏幕宽度≥992px，即大于等于lg断点）：调整order值让D块排在C块左侧，同时配合响应式宽度类实现桌面端的左右分栏布局

完整可运行代码 #

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <!-- A块：全断点下固定占3列宽度 -->
  <div class="col-3 bg-secondary">A</div>
  <!-- 右侧内容容器：全断点下占剩余9列宽度 -->
  <div class="col-9">
    <!-- B块：全宽展示，优先级最高始终排在最前 -->
    <div class="bg-success p-1 mb-1">B</div>
    <!-- D块：移动端order=2排在C后，桌面端order-lg=1排在左侧，占10列宽度 -->
    <div class="bg-primary p-1 mb-1 col-lg-10 order-lg-1 order-2">D</div>
    <!-- C块：移动端order=1排在D前，桌面端order-lg=2排在右侧，占2列宽度 -->
    <div class="bg-warning p-1 col-lg-2 order-lg-2 order-1">C</div>
  </div>
</div>

效果验证 #

• 桌面端：左侧为A块+B块+D块的10列布局，右侧为C块的2列布局，符合桌面端设计需求
• 移动端：块级元素垂直排列顺序为A→B→C→D，完成C、D块的顺序调换需求

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