Bootstrap移动端列顺序翻转问题：尝试pull类方案无效

嘿，我懂你碰到的麻烦了——Bootstrap 3的push/pull类确实容易让人绕晕，尤其是跨设备调整列顺序的时候。之前你用错了逻辑导致布局出问题，我给你说个靠谱的解决方案：

核心思路是移动端的列顺序由HTML的原始书写顺序决定，而桌面端的顺序靠push/pull来调整。因为你想要移动端产品展示区（原col-md-9）在上，搜索分类区（原col-md-3）在下，所以得先写产品列，再写搜索分类列，然后在桌面端用push/pull把它们的位置换回来。

具体代码这么写：

<div class="container">
  <!-- 产品展示区：移动端默认在上，桌面端被推到右侧 -->
  <div class="col-md-9 col-md-push-3">
    这里放实际产品内容
  </div>
  <!-- 搜索&分类区：移动端默认在下，桌面端被拉到左侧 -->
  <div class="col-md-3 col-md-pull-9">
    这里放搜索功能和产品分类
  </div>
</div>

为啥之前的方法没用？大概率是你没调整HTML的顺序——如果还是先写3列再写9列，哪怕加了pull类，移动端还是会先渲染3列的内容，自然没法让它跑到底部。

简单拆解逻辑：

• 先写你想在移动端显示在顶部的内容（产品列）
• 再写移动端要显示在底部的内容（搜索分类列）
• 给产品列加col-md-push-3：在桌面端把它向右推3个列宽的位置，给左侧的分类区腾地方
• 给搜索分类列加col-md-pull-9：在桌面端把它向左拉9个列宽的位置，占据左侧的3列空间

这样不管是桌面端还是移动端，布局都能完全符合你的需求啦。

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