Bootstrap：md与sm/xs屏幕下的列网格布局调整需求

嘿，这个问题我之前也碰到过！其实用Bootstrap自带的响应式排序工具就能轻松解决，分两种情况给你说哈～

如果你用的是 Bootstrap 4 或 5 #

Bootstrap 4+ 新增了 order-* 系列类，可以直接控制不同屏幕尺寸下列的排列顺序，不用折腾复杂的浮动调整。你只需要给每个列加上对应的顺序类，就能实现小屏幕换顺序、大屏幕保持原布局的效果：

<div class="row">
  <div class="col-md-4 order-md-1 order-2" style="background:red;">logo</div>
  <div class="col-md-4 order-md-2 order-1" style="background:blue;">content</div>
  <div class="col-md-4 order-md-3 order-3" style="background:yellow;">content+imgs</div>
</div>

简单解释下这些类的作用：

• order-md-1/2/3：在md及以上的大屏幕上，保持你原本的三列并排顺序（logo第1、content第2、content+imgs第3）
• order-1/2/3：在xs/sm的小屏幕上，强制让content列排最前面，logo列紧跟其后，content+imgs列在最后，同时所有列自动变成100%宽度垂直排列，完全符合你的需求。

如果你用的是 Bootstrap 3 #

Bootstrap 3没有order类，得靠col-push-*和col-pull-*结合调整HTML结构来实现。核心思路是：先把小屏幕要靠前的列写在HTML最前面，再用push/pull在大屏幕上把顺序调回去。

修改后的代码是这样的：

<div class="row">
  <div class="col-md-4 col-md-push-4" style="background:blue;">content</div>
  <div class="col-md-4 col-md-pull-4" style="background:red;">logo</div>
  <div class="col-md-4" style="background:yellow;">content+imgs</div>
</div>

原理很简单：

• 小屏幕下，HTML里的顺序就是显示顺序，所以content列排在最上面，接着是logo、content+imgs，自动垂直排列。
• 大屏幕下，col-md-push-4把content列向右推4个栅格的位置，col-md-pull-4把logo列向左拉4个栅格，这样logo就回到了第一列的位置，content列在第二列，和你原来的布局完全一致。

之前你用push/pull没成功，大概率是没调整HTML的顺序——Bootstrap 3的push/pull是基于现有HTML结构的浮动偏移，光加类不换顺序是达不到响应式换位置的效果哒～

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