如何在Bootstrap v5中实现大屏图片为第二列、小屏图片为第一列

问题根源 #

你代码的问题在于没有给order类添加响应式断点后缀。Bootstrap 所有工具类都遵循移动端优先规则，不带断点的类会作用于所有屏幕尺寸，你直接给图片列添加了order-last，等于强制所有屏幕下图片列都排在最后，自然看不到响应式切换效果。 #

正确实现代码 #

<div class="container">
  <div class="row">
    <!-- 图片列：默认（md及以下小屏）按HTML结构排第一，lg大屏时排到最后 -->
    <div class="col-lg-6 order-lg-last">
      <img src="https://www.sobharealty.com/lp-properties-in-dubai/images/lp-2021/desk-img-19May2021.jpg" class="w-100" alt="展示图" >
    </div> 
    
    <div class="col-lg-6">
      <span>FIRST COL</span>
      <span>我想要在移动端屏幕上图片排在第一位，我使用了Bootstrap v5的order-X、order-last等特性，但列的顺序没有发生变化，我曾看到过相关说明称小屏下order类不会根据CSS改变排序</span>
    </div>
  </div>
</div>

实现说明 #

• order-lg-last 仅在屏幕宽度 ≥ lg断点（默认992px）时生效，让当前列排到行的最后一位，刚好满足你大屏下图片在第二列的需求
• 屏幕宽度小于992px时，order-lg-last 不生效，图片列保持HTML原本的先后顺序，排在第一位，符合md及以下小屏的展示要求
• 如需更精细的顺序控制，可使用order-{断点}-{序号}的格式，比如两列布局也可以写成图片列加order-lg-2，文本列加order-lg-1，和上述代码效果完全一致

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