Bootstrap 5移动端/平板端图片移至文本上方的布局问题

你当前代码的核心问题是移动端（xs，<576px）未设置正确的排序优先级，且断点匹配逻辑和需求不符。要实现「移动端+平板端图片在文本上方，桌面端左右布局」的效果，需针对不同断点精准配置order类。

修正后完整代码 #

<!-- FEATURE SECTION START -->
<section>
  <div class="container">
    <div class="row bg-white mt-1 px-2">
      <!-- 图片列：xs/sm默认在上方，lg时左列，无需额外order -->
      <div class="col-lg-6 col-sm-12">
        <img src="./src/img/feature-section.jpeg" alt="logo" class="img-fluid rounded float-start mb-2 mt-1" id="team-img"/>
      </div>
      <!-- 文本列：xs/sm默认在图片下方，lg时右列，无需额外order -->
      <div class="col-lg-6 col-sm-12">
        <h2 class="display-6" id="about-heading">About Us</h2>
        <hr>
        <p class="lead mt-5">
          Ullamco nostrud ipsum laboris sint commodo. Do duis veniam culpa tempor veniam laboris dolor amet minim qui incididunt ipsum. Magna proident commodo ea do eiusmod amet cupidatat eu do commodo consectetur Lorem dolore exercitation. Tempor tempor id consectetur in exercitation enim reprehenderit amet elit ullamco veniam adipisicing officia eu. Cupidatat non velit in aliquip exercitation eiusmod occaecat aliqua ex.
        </p>
        <a href="./about#about" class="btn btn-primary mt-3" id="button">Read&nbsp;More</a>
      </div>
    </div>
  </div>
</section>
<!-- FEATURE SECTION CLOSE -->

<!-- MISSION SECTION START -->
<section>
  <div class="container">
    <div class="row bg-white pt-5 px-2">
      <!-- 文本列：xs/sm时排后面（order-2），lg时排前面（order-lg-1） -->
      <div class="col-lg-6 col-sm-12 order-2 order-lg-1">
        <h2 class="display-6" id="mission-heading">Our Mission</h2>
        <hr>
        <p class="lead mt-5">
          Ullamco nostrud ipsum laboris sint commodo. Do duis veniam culpa tempor veniam laboris dolor amet minim qui incididunt ipsum. Magna proident commodo ea do eiusmod amet cupidatat eu do commodo consectetur Lorem dolore exercitation. Tempor tempor id consectetur in exercitation enim reprehenderit amet elit ullamco veniam adipisicing officia eu. Cupidatat non velit in aliquip exercitation eiusmod occaecat aliqua ex.
        </p>
        <a href="./about#mission" class="btn btn-primary mt-3 mb-3" id="button">Read&nbsp;More</a>
      </div>
      <!-- 图片列：xs/sm时排前面（order-1），lg时排后面（order-lg-2） -->
      <div class="col-lg-6 col-sm-12 order-1 order-lg-2">
        <img src="./src/img/team-section002.jpeg" alt="logo" class="img-fluid mb-2 rounded float-start" id="team-img"/>
      </div>
    </div>
  </div>
</section>
<!-- MISSION SECTION CLOSE -->

逻辑说明 #

1. FEATURE区：DOM顺序为图片在前、文本在后，xs/sm单列模式下图片自然显示在上方；lg双列模式下自动左图右文，无需额外排序类。
2. MISSION区：DOM顺序为文本在前、图片在后，通过order-1/order-2控制xs/sm时图片排到文本上方；order-lg-1/order-lg-2控制lg桌面端保持左文右图的布局。
3. 若你的平板设备属于md断点（768px-991px），可将order-lg-*改为order-md-*，确保平板视图也能触发左右布局。

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