Bootstrap 5列排序异常：超过4列后排序功能失效求助

问题原因 #

你当前的布局逻辑存在两个核心问题：

1. 所有列都塞进了同一个row容器，Bootstrap的row是弹性容器，里面的col会按order-md-*数值做全局排序，列数超过4个后，全局排序会打乱你想要的分组交替布局。
2. 对于需要“文左图右”的组，你把图放在了DOM的前面，导致小屏幕下是图在上、文在下，不符合“图、文、文、图”的交替需求（第二组小屏幕应该是文在上、图在下）。

修复方案 #

把每一组（图+文）拆成独立的row，每组单独控制排序，逻辑更清晰且不会互相干扰：

• 图左文右组：保持DOM顺序为「图→文」，无需额外设置order-md-*，默认顺序即可实现md及以上图左文右，小屏幕图上文下。
• 文左图右组：调整DOM顺序为「文→图」，给图加order-md-2，文加order-md-1，这样md及以上会交换两者位置（文左图右），小屏幕保持文上图下，完美匹配交替布局。

修复后的代码示例 #

<div class="container">
  <!-- 第一组：图左文右，小屏幕图上文下 -->
  <div class="row mb-4">
    <div class="col-md-6">
      <img class="img-fluid rounded mb-4 mb-lg-0" src="images/security_alarm.png" alt="Security Alarm System">
    </div>
    <div class="col-md-6">
      <h1 class="font-weight-light">Is your home insurance proof?</h1>
      <p>Most insurance companies now ask that you upgrade the security of your home to qualify for home insurance. Did you know you must have kite marked locks on the front and back doors to qualify for a valid claim? </p>
    </div>
  </div>

  <!-- 第二组：文左图右，小屏幕文上图下 -->
  <div class="row mb-4">
    <div class="col-md-6 order-md-1">
      <h1 class="font-weight-light">Is your home insurance proof?</h1>
      <p>Most insurance companies now ask that you upgrade the security of your home to qualify for home insurance. Did you know you must have kite marked locks on the front and back doors to qualify for a valid claim? </p>
    </div>
    <div class="col-md-6 order-md-2">
      <img class="img-fluid rounded mb-4 mb-lg-0" src="images/security_alarm.png" alt="Security Alarm System">
    </div>
  </div>

  <!-- 第三组：图左文右，小屏幕图上文下 -->
  <div class="row mb-4">
    <div class="col-md-6">
      <img class="img-fluid rounded mb-4 mb-lg-0" src="images/security_alarm.png" alt="Security Alarm System">
    </div>
    <div class="col-md-6">
      <h1 class="font-weight-light">Is your home insurance proof?</h1>
      <p>Most insurance companies now ask that you upgrade the security of your home to qualify for home insurance. Did you know you must have kite marked locks on the front and back doors to qualify for a valid claim? </p>
    </div>
  </div>
</div>

补充说明 #

• 每个row独立控制一组布局，不管添加多少组，只要按「图左文右→文左图右」的循环模式编写，就能保证布局始终正常。
• 新增的mb-4是为了给每组之间增加间距，提升视觉效果，可根据需求调整。

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