Bootstrap响应式布局下调整Div显示顺序的技术咨询

嘿，这个需求其实用Bootstrap内置的响应式排序类就能轻松搞定，完全不需要额外写JS或者自定义CSS，贴合Bootstrap的布局逻辑。

核心思路是利用Bootstrap的order-*系列类，针对不同屏幕断点（比如大屏lg、小屏默认）分别控制两个div的排列顺序：

方案1：调整HTML结构（推荐，更符合语义/SEO） #

把需要小屏优先显示的id="2"的div放在HTML结构最前面，然后用order-lg-last让它在大屏时排到后面；给id="1"的div加order-lg-first确保大屏时它排在首位：

<div class="container main-padding">
  <div class="row">
    <!-- 小屏下优先显示的区域 -->
    <div class="col-lg-4 order-lg-last" id="2">
      <!-- 这里是id=2的内容 -->
    </div>
    <!-- 大屏下排在首位的区域 -->
    <div class="col-lg-8 order-lg-first" id="1">
      <div class="page-body-title">MISSIONS DE L'IGF</div>
      <!-- 其他原有内容 -->
    </div>
  </div>
</div>

方案2：不调整HTML结构 #

如果不想改动原有HTML的顺序，也可以通过给两个div分别设置不同断点的order类来实现：

<div class="container main-padding">
  <div class="row">
    <div class="col-lg-8 order-lg-1" id="1">
      <div class="page-body-title">MISSIONS DE L'IGF</div>
      <!-- 其他原有内容 -->
    </div>
    <div class="col-lg-4 order-first order-lg-2" id="2">
      <!-- 这里是id=2的内容 -->
    </div>
  </div>
</div>

原理说明 #

• order-first：让元素在所有屏幕尺寸下都排在flex容器的最前面（相当于CSS的order: -1）
• order-lg-*：仅在屏幕宽度≥992px（Bootstrap默认lg断点）时生效，order-lg-1表示排第1位，order-lg-2排第2位，order-lg-last直接排到最后
• Bootstrap的.row本身是flex容器，所以这些order类能直接生效

这样就能完美实现：小屏（平板、手机）下id="2"优先显示，大屏下保持id="1"在前的原有顺序啦！

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