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

要实现移动端/平板尺寸下图片位于文本上方、大屏保持左右布局的效果，只需给对应列添加Bootstrap 5的order排序类，结合移动优先的断点规则调整顺序即可：

1. Feature板块（图片默认在左，小屏保持在上） #

当前结构下，<lg尺寸时图片已默认在上，若需明确控制或调整断点为md，可添加order类锁定顺序：

<!-- FEATURE SECTION START -->
<section>
  <div class="container">
    <div class="row bg-white mt-1 px-2">
      <!-- 图片列：小屏按默认顺序排前，大屏保持左布局 -->
      <div class="col-lg-6 col-sm-12 order-1 order-lg-0">
        <img src="./src/img/feature-section.jpeg" alt="logo" class="img-fluid rounded float-start mb-2 mt-1" id="team-img"/>
      </div>
      <!-- 文本列：小屏排后，大屏保持右布局 -->
      <div class="col-lg-6 col-sm-12 order-2 order-lg-1">
        <h2 class="display-6" id="about-heading">About Us</h2>
        <hr>
        <p class="lead mt-5">
          Aliqua esse eiusmod culpa dolore ea Lorem do labore labore proident nisi. Do labore sunt veniam Lorem veniam dolor fugiat fugiat excepteur amet officia ipsum velit. Proident ullamco sint magna nisi in sunt veniam qui sit. Fugiat est ullamco sint commodo officia nostrud dolore. Dolor pariatur mollit mollit veniam occaecat magna pariatur et cillum culpa laboris. Magna qui est aute quis veniam exercitation elit cillum eiusmod.
        </p>
        <a href="./about#about" class="btn btn-primary mt-3" id="button">Read&nbsp;More</a>
      </div>
    </div>
  </div>
</section>
<!-- FEATURE SECTION CLOSE -->

2. Mission板块（文本默认在左，小屏需图片在上） #

这里需要反转小屏时的列顺序，让图片排到文本上方：

<!-- MISSION SECTION START -->
<section>
  <div class="container">
    <div class="row bg-white pt-5 px-2">
      <!-- 文本列：小屏排后，大屏保持左布局 -->
      <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">
          Occaecat dolore in non magna cupidatat. Aliquip exercitation elit nulla elit sint in elit magna elit culpa nisi commodo fugiat. Dolor laborum cupidatat aliquip velit aliqua officia ipsum eu adipisicing. Qui do ut consectetur magna. Nostrud non irure culpa quis.
        </p>
        <a href="./about#mission" class="btn btn-primary mt-3 mb-3" id="button">Read&nbsp;More</a>
      </div>
      <!-- 图片列：小屏排前（显示在文本上方），大屏保持右布局 -->
      <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 -->

关键说明 #

• Bootstrap 5是移动优先框架，order-{n} 对所有屏幕生效，order-{breakpoint}-{n} 仅在指定断点及以上生效（如order-lg-0仅在lg及以上屏幕生效）。
• 排序数值越小，列越靠前；order-0是默认顺序，可省略不写。
• 若需适配md尺寸的平板，只需把代码中所有lg替换为md即可（比如col-md-6、order-md-1）。

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