响应式模式下Div位置调整：如何保持Div显示顺序与代码一致？

问题分析 #

你当前的代码里图片Div写在内容Div前面，但移动端内容却跑到图片上方，大概率是包裹这两个Col的父row用了反向排列的Flex类（比如flex-column-reverse），或者给内容Div加了颠倒顺序的order类，导致小屏幕下显示顺序被打乱。

解决方法 #

方法1：修正父容器的Flex方向

给父row添加flex-column flex-lg-row类，确保小屏幕垂直按代码顺序排列，大屏幕水平左图右文：

<div class="row flex-column flex-lg-row">
  <!-- 图片Div -->
  <div class="col-12 col-lg-6 d-flex justify-content-center justify-content-lg-end mb-4 mb-lg-0">
    <div class="w-100 img-fluid px-3 px-lg-0">
      <img src="#" alt="图片描述">
    </div>
  </div>
  <!-- 内容Div -->
  <div class="col-12 col-lg-6 text py-5">
    <h1>title</h1>
    <div class="pr-0">
      <h2>subtitle</h2>
    </div>
    <p>这里是内容</p>
    <a href="#">链接</a>
  </div>
</div>

• flex-column：小屏幕下垂直排列，严格遵循代码里图片在前、内容在后的顺序
• flex-lg-row：大屏幕（lg及以上尺寸）切换为水平排列，保持左图右文的布局

方法2：用order类强制控制顺序

如果父容器有其他样式不能改，直接给两个Col加顺序控制类，锁定显示顺序：

<!-- 图片Div：所有屏幕下排第1位 -->
<div class="col-12 col-lg-6 d-flex justify-content-center justify-content-lg-end mb-4 mb-lg-0 order-1">
  <div class="w-100 img-fluid px-3 px-lg-0">
    <img src="#" alt="图片描述">
  </div>
</div>
<!-- 内容Div：所有屏幕下排第2位 -->
<div class="col-12 col-lg-6 text py-5 order-2">
  <h1>title</h1>
  <div class="pr-0">
    <h2>subtitle</h2>
  </div>
  <p>这里是内容</p>
  <a href="#">链接</a>
</div>

• order-1/order-2是Bootstrap内置类，直接指定元素的排列优先级，数值越小越靠前

方法3：排查并移除反向排序样式

检查以下内容并删除：

• 父row上的flex-column-reverse或flex-row-reverse类
• 内容Div上的order-1、图片Div上的order-2这类颠倒顺序的类
• 自定义CSS里的order属性或flex-direction: reverse设置

效果验证 #

修改后，小屏幕会先显示图片，再显示内容（和代码顺序完全一致）；大屏幕依然保持左图右文的布局。

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