Bootstrap 5实现桌面与移动端Div不同排列布局求助

核心思路 #

利用Bootstrap 5的flex响应式order类（order-* 和 order-{breakpoint}-*）控制元素在不同屏幕尺寸下的显示顺序。Bootstrap 5的网格系统基于flex布局，float属性在flex容器内不生效，必须用flex原生的order属性调整顺序。

具体实现代码 #

以下是完全符合需求的布局代码：

<div class="container my-4">
  <!-- 第一行：桌面/移动端均为「图片+文本」 -->
  <div class="row align-items-center mb-5">
    <div class="col-md-6">
      <img src="your-first-image.jpg" class="img-fluid rounded" alt="第一行图片">
    </div>
    <div class="col-md-6">
      <h3>第一行标题</h3>
      <p>第一行文本内容，桌面和移动端都会显示在图片右侧，可替换为自定义内容。</p>
    </div>
  </div>

  <!-- 第二行：桌面端「文本+图片」，移动端「图片+文本」 -->
  <div class="row align-items-center">
    <!-- 文本列：桌面端排第1位，移动端排第2位 -->
    <div class="col-md-6 order-md-1 order-2">
      <h3>第二行标题</h3>
      <p>第二行文本内容，桌面端显示在图片左侧，移动端显示在图片下方。</p>
    </div>
    <!-- 图片列：桌面端排第2位，移动端排第1位 -->
    <div class="col-md-6 order-md-2 order-1">
      <img src="your-second-image.jpg" class="img-fluid rounded" alt="第二行图片">
    </div>
  </div>
</div>

代码说明 #

• order-1/order-2：控制**移动端（<768px）**的元素顺序，数值越小越靠前，因此图片列加order-1优先显示，文本列order-2在后。
• order-md-1/order-md-2：控制**桌面端（≥768px）**的元素顺序，文本列加order-md-1排前，图片列order-md-2排后。
• align-items-center：让行内图片和文本垂直居中，优化视觉效果，可按需移除。
• img-fluid：确保图片在响应式布局中自适应容器宽度，避免溢出。

无效原因说明 #

Bootstrap 5的.row是flex容器，内部.col为flex子项，float属性在flex子项上不生效，必须使用flex布局相关属性（如order）调整元素顺序，这也是直接写float无效的原因。

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