Bootstrap 4响应式布局排序问题：如何调整不同屏幕尺寸下的内容显示顺序

嘿，这个需求刚好能用Bootstrap自带的响应式排序类完美解决，完全不用写额外的CSS，我给你一步步讲清楚：

核心思路 #

Bootstrap是移动优先的框架，所以我们先定义小屏设备的显示顺序，再用大屏断点的排序类覆盖，同时配合响应式列宽控制布局。

修改后的完整代码 #

<div class="row">
  <!-- content A：小屏排第1，大屏时和contentB同属右侧6列 -->
  <div class="col-12 col-md-6 order-1 order-md-2">
    content A
  </div>
  <!-- content：小屏排第2，大屏时占左侧6列 -->
  <div class="col-12 col-md-6 order-2 order-md-1">
    content
  </div>
  <!-- content B：小屏排第3，大屏时和contentA同属右侧6列 -->
  <div class="col-12 col-md-6 order-3 order-md-2">
    content B
  </div>
</div>

代码解释 #

• 小屏设备（<768px）：
  • col-12让每个内容块占满整行，单独显示
  • order-1/order-2/order-3直接控制顺序：content A → content → content B，完全符合你的要求
• 大屏设备（≥768px）：
  • col-md-6让每个内容块占6列（一行两列）
  • order-md-1让content排在左侧第一列
  • content A和content B的order-md-2让它们都排在右侧6列，因为都是col-md-6，会自动上下堆叠，和你原来的大屏显示效果完全一致

为什么这个方案可行？ #

Bootstrap的row本质是flex容器，order-*类直接对应CSS的order属性，移动优先的特性让小屏的排序规则先生效，大屏的order-md-*会覆盖小屏的规则，同时响应式列宽控制了不同屏幕下的布局宽度。

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