如何在Bootstrap的md断点（<768px）后调整列的顺序？

这个需求用Bootstrap自带的工具类就能搞定，不用额外写自定义CSS，我给你一步步拆解解决方案：

核心思路 #

我们需要同时控制两个关键点：

1. 列的顺序：在屏幕宽度小于768px时，把第一个列移到最后；在≥768px时保持原顺序。
2. 列的宽度：在小屏幕下让另外两个列占满同一行，第一个列单独占一行。

修改后的代码 #

<div class="container">
  <div class="row">
    <!-- 第一个列：md及以上保持第1位，小屏幕排最后且占满一行 -->
    <div class="col-md-4 col-sm-12 order-md-1 order-last">
      第一个列内容
    </div>
    <!-- 第二个列：md占3列，小屏幕占6列（和第三个列同排） -->
    <div class="col-md-3 col-sm-6">
      第二个列内容
    </div>
    <!-- 第三个列：md占3列，小屏幕占6列（和第二个列同排） -->
    <div class="col-md-3 col-sm-6">
      第三个列内容
    </div>
  </div>
</div>

代码细节解释 #

• 排序控制：
  • order-last：让这个列在所有断点下默认排最后。
  • order-md-1：在屏幕宽度≥768px（md断点及以上）时，强制让这个列回到第1位（覆盖order-last的效果），确保大屏下的顺序和你原本的布局一致。
• 宽度控制：
  • col-sm-6：给第二、三个列添加这个类，确保在≥576px的屏幕上各占6列，刚好铺满一行；如果要在更小的屏幕（<576px）也保持两列同排，把col-sm-6换成col-6即可。
  • col-sm-12：让第一个列在小屏幕下占满一整行，自然落在另外两个列的下方。

这样就能完美实现你想要的布局效果啦～

内容的提问来源于stack exchange，提问作者acer.js