Bootstrap 3中6个Div的不同屏幕布局排序问题求助

嘿，我来帮你搞定这个Bootstrap 3的布局问题！首先得揪出你原代码里的两个核心问题：

• 大屏（sm及以上）下的列总宽度加起来是24，远远超过了Bootstrap栅格的12列限制，这必然会导致自动换行；
• col-sm-push/pull的逻辑用错了，导致列偏移后要么超出当前行，要么和其他列重叠，直接把布局搞成了三行。

先明确你的需求：移动端（xs）每行两个div，顺序是1→2→3→4→5→6；大屏下要调整布局，不能乱换行。我假设你想要的大屏布局是：第一行放1、3、4，第二行放5、6、2（毕竟你原代码里给2加了push，应该是想把它放到右侧末尾），下面给你一套能完美实现的代码，再给你拆解逻辑：

<div class="container">
  <div class="row">
    <!-- 1：所有屏幕下位置稳定，xs占半行，sm占2列 -->
    <div class="col-sm-2 col-xs-6">1</div>
    
    <!-- 3：大屏下占5列，移动端需要被推到右边，给2腾位置 -->
    <div class="col-sm-5 col-xs-6 col-xs-push-6">3</div>
    
    <!-- 4：大屏下占5列，移动端需要被拉到左边，和3交换位置 -->
    <div class="col-sm-5 col-xs-6 col-xs-pull-6">4</div>
    
    <!-- 5：所有屏幕下位置稳定 -->
    <div class="col-sm-5 col-xs-6">5</div>
    
    <!-- 6：所有屏幕下位置稳定 -->
    <div class="col-sm-5 col-xs-6">6</div>
    
    <!-- 2：大屏下占2列放在第二行末尾，移动端拉到1的右边，组成第一行 -->
    <div class="col-sm-2 col-xs-6 col-xs-pull-6">2</div>
  </div>
</div>

逻辑拆解： #

移动端（xs）效果：

• 1占左半行，2通过col-xs-pull-6拉到1的右边，组成第一行（1&2）；
• 3被col-xs-push-6推到右半行，4被col-xs-pull-6拉到左半行，组成第二行（3&4）；
• 5和6自然组成第三行，完全符合你要的顺序和每行两个的布局。

大屏（sm及以上）效果：

• 所有xs专属的push/pull类自动失效，列宽按sm的设置来：
  • 第一行：1（2列）+3（5列）+4（5列）=12列，刚好填满一行；
  • 第二行：5（5列）+6（5列）+2（2列）=12列，也刚好填满一行；
    完全不会出现多余的换行，布局整洁。

另外要提醒你：Bootstrap 3的push/pull只能在同一行内调整列的视觉顺序，没法跨行列重排。所以如果要实现跨行列的顺序变化，就得先调整DOM的顺序，再用小屏幕的push/pull来修正显示顺序，这也是上面代码的核心思路。

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