如何在移动版面上更改Bootstrap 3列顺序？
我正在做一个具有顶级固定导航栏的响应式布局。 在下面我有两列，一个是边栏（3），一个是内容（9）。 在桌面上看起来是这样的
导航栏
[3] [9]
当我resize到移动的navbar被压缩和隐藏，然后边栏堆叠在内容的顶部，如下所示：
导航栏
[3]
[9]
我想在顶部的主要内容，所以我需要改变在这个移动订单：
导航栏
[9]
[3]
我发现这篇文章涵盖了相同的观点，但是接受的答案已经被编辑，表示该解决scheme不适用于当前版本的Bootstrap。
如何在移动设备上重新排列这些列？ 或者，我怎样才能得到sidbar列表组到我扩大的导航栏？
这是我的代码：
<div class="navbar navbar-inverse navbar-static-top"> <div class="container"> <a href="#" class="navbar-brand">Brand Title</a> <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="collapse navbar-collapse navHeaderCollapse"> <ul class="nav navbar-nav navbar-right"><!--original navbar--> <li class="active"><a href="#">Home</a></li> <li><a href="#">FAQ</a></li> </ul> </div> </div> </div><!--End Navbar Div--> <div class="container"> <div class="row"> <div class="col-lg-3"> <div class="list-group"> <a href="#" class="list-group-item"> <h4 class="list-group-item-heading">Lorem ipsum</h4> <p class="list-group-item-text">Lorem Ipsum is simply dummy text.</p></a> </div> </div><!--end sidebar--> <div class="col-lg-9"> <div class="panel panel-default"> <div class="panel-body"> <div class="page-header"> Main Content </div> </div> </div><!--end main content area-->
您不能在较小的屏幕中更改列的顺序，但可以在大屏幕中执行此操作。
所以改变你的列的顺序。
<!--Main Content--> <div class="col-lg-9 col-lg-push-3"> </div> <!--Sidebar--> <div class="col-lg-3 col-lg-pull-9"> </div>
默认情况下，首先显示主要内容。
所以在移动主要内容首先显示。
通过使用col-lg-push和col-lg-pull我们可以对大屏幕中的列进行重新sorting，并在左侧显示侧栏，在右侧显示主要内容。
在这里工作的小提琴 。
这里的答案仅适用于2个单元格，但只要这些列中有更多的单元格，就可能导致更多的复杂性。 我想我已经find了一个广义的解决scheme，为任何数量的多个单元格列。
目标
在移动设备上获取垂直标签序列，以便按照devise在平板电脑/台式机上所需的任何顺序进行排列。 在这个具体的例子中，一个标签必须比平时更早进入stream程，而另一个标签必须晚于平时进入stream程。
移动
[1 headline] [2 image] [3 qty] [4 caption] [5 desc]
平板+
[2 image ][1 headline] [ ][3 qty ] [ ][5 desc ] [4 caption][ ] [ ][ ]
因此，标题需要在平板电脑+上进行洗牌，技术上也是如此，因此它位于移动设备之前的标题标签之上。 你马上就会看到4个字幕也有麻烦了。
我们假设每个单元格的高度都不相同，并且需要与下一个单元格一齐冲洗（排除像桌子这样的弱技巧）。
与所有Bootstrap Grid问题一样，步骤1是要实现HTML必须在页面上以移动顺序1 2 3 4 5。 然后，确定如何让平板电脑/桌面以这种方式重新sorting – 理想情况下没有Javascript。
得到1 headline和3 qty坐在右边不是左边的解决scheme是简单地设置他们pull-right 。 这适用于CSS float: right ，这意味着他们find了第一个合适的开放空间。 您可以将浏览器的CSS处理器按照以下顺序进行操作：1适合右上angular。 2是下一个，并且是正常的（ float: left ），所以它到达左上angular。 然后3，这是float: right所以它跳过下面1。
但是这个解决scheme对于4 caption是不够的。 因为右边的2个单元很短，所以左边的2 image往往会比两者合起来要长。 引导网格是一个荣耀的浮法黑客，这意味着4 caption是float: left 。 有2 image占据了左边那么多的空间， 4 caption试图适应下一个可用的空间 – 通常是右栏，而不是我们想要的左栏。
这里的解决scheme（更常见的是这样的任何问题）是在平板电脑上添加一个隐藏在移动设备上的hack标签，以便将字幕推出，然后被负边缘覆盖 – 就像这样：
[2 image ][1 headline] [ ][3 qty ] [ ][4 hack ] [5 caption][6 desc ^^^] [ ][ ]
http://jsfiddle.net/b9chris/52VtD/16633/
HTML：
<div id=headline class="col-xs-12 col-sm-6 pull-right">Product Headline</div> <div id=image class="col-xs-12 col-sm-6">Product Image</div> <div id=qty class="col-xs-12 col-sm-6 pull-right">Qty, Add to cart</div> <div id=hack class="hidden-xs col-sm-6">Hack</div> <div id=caption class="col-xs-12 col-sm-6">Product image caption</div> <div id=desc class="col-xs-12 col-sm-6 pull-right">Product description</div>
CSS：
#hack { height: 50px; } @media (min-width: @screen-sm) { #desc { margin-top: -50px; } }
所以，这里的通用解决scheme是添加可以在手机上消失的hack标签。 在平板电脑上，hack标签允许显示的标签出现在更早或更晚的stream程中，然后上下拉动以覆盖这些hack标签。
注意：为了链接jsfiddle中的简单示例，我使用了固定的高度，但是我正在使用的实际网站内容在所有5个标签中高度不同。 在标签高度变化相对较大的情况下，特别是图像和desc，它可以正确渲染。
注2：根据您的布局，您可能会在平板电脑+（或更高分辨率）上获得足够一致的列顺序，以避免使用hack标记，而应使用margin-bottom ，如下所示：
注3：这使用Bootstrap 3.引导程序4使用不同的网格集，并且不会与这些示例一起使用。
2017年更新
对于基于Bootstrap 3的原始问题，解决方法是使用较大宽度的推挽 ，然后列将显示它们在较小（xs）宽度上的自然顺序。
<div class="container"> <div class="row"> <div class="col-md-9 col-md-push-3"> main </div> <div class="col-md-3 col-md-pull-9"> sidebar </div> </div> </div>
Bootstrap 3： http : //www.codeply.com/go/wgzJXs3gel
@emre说：“ 你不能在较小的屏幕上改变列的顺序，但你可以在大屏幕上做到这一点 ”。
然而，这应该澄清说：“你不能改变全宽 ”堆栈“列的顺序..”在引导3。
然而，在Bootstrap 4 （alpha 6）中，现在可以 改变顺序，即使列是垂直全宽堆叠的 ，这要归功于Bootstrap 4 flexbox。 OFC，推挽方法仍然可以工作，但是现在还有其他方法可以在Bootstrap 4中更改列顺序，从而可以重新排列全宽列。
方法1 – 对xs屏幕使用flex-column-reverse ：
<div class="row flex-column-reverse flex-md-row"> <div class="col-md-3"> sidebar </div> <div class="col-md-9"> main </div> </div>
方法2 – 对xs屏幕使用flex-first ：
<div class="row"> <div class="col-md-3"> sidebar </div> <div class="col-md-9 flex-first flex-md-unordered"> main </div> </div>
Bootstrap 3： http : //www.codeply.com/go/bBMOsvtJhD
首先从手机版开始，大部分时间你都可以达到你想要的。
这里的例子：
http://jsbin.com/wulexiq/edit?html,css,output
<div class="container"> <h1>PUSH - PULL Bootstrap demo</h1> <h2>Version 1:</h2> <div class="row"> <div class="col-xs-12 col-sm-5 col-sm-push-3 green"> IN MIDDLE ON SMALL/MEDIUM/LARGE SCREEN <hr> TOP ROW XS-SMALL SCREEN </div> <div class="col-xs-12 col-sm-4 col-sm-push-3 gold"> TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN <hr> MIDDLE ROW ON XS-SMALL </div> <div class="col-xs-12 col-sm-3 col-sm-pull-9 red"> TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN <hr> BOTTOM ROW ON XS-SMALL </div> </div> <h2>Version 2:</h2> <div class="row"> <div class="col-xs-12 col-sm-4 col-sm-push-8 yellow"> TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN <hr> TOP ROW ON XS-SMALL </div> <div class="col-xs-12 col-sm-4 col-sm-pull-4 blue"> TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN <hr> MIDDLE ROW XS-SMALL SCREEN </div> <div class="col-xs-12 col-sm-4 col-sm-pull-4 pink"> IN MIDDLE ON SMALL/MEDIUM/LARGE SCREEN <hr> BOTTOM ROW ON XS-SMALL </div> </div> <h2>Version 3:</h2> <div class="row"> <div class="col-xs-12 col-sm-5 cyan"> TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN TOP ROW ON XS-SMALL </div> <div class="col-xs-12 col-sm-3 col-sm-push-4 orange"> TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN <hr> MIDDLE ROW ON XS-SMALL </div> <div class="col-xs-12 col-sm-4 col-sm-pull-3 brown"> IN THE MIDDLE ON SMALL/MEDIUM/LARGE SCREEN <hr> BOTTOM ROW XS-SMALL SCREEN </div> </div> <h2>Version 4:</h2> <div class="row"> <div class="col-xs-12 col-sm-4 col-sm-push-8 darkblue"> TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN <hr> TOP ROW XS-SMALL SCREEN </div> <div class="col-xs-12 col-sm-4 beige"> MIDDLE ON SMALL/MEDIUM/LARGE SCREEN <hr> MIDDLE ROW ON XS-SMALL </div> <div class="col-xs-12 col-sm-4 col-sm-pull-8 silver"> TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN <hr> BOTTOM ROW ON XS-SMALL </div> </div> </div>
2017年10月
我想添加另一个Bootstrap 4解决scheme。 一个为我工作。
CSS“订单”属性结合媒体查询，可以用来重新排列列，当他们堆放在较小的屏幕上。
像这样的东西：
@media only screen and (max-width: 768px) { #first { order: 2; } #second { order: 4; } #third { order: 1; } #fourth { order: 3; } }
CodePen链接： https ：//codepen.io/preston206/pen/EwrXqm
调整屏幕大小，你会看到列堆叠在一个不同的顺序。
我会把这与原来的海报的问题。 通过CSS，可以定位导航栏，边栏和内容，然后对在媒体查询中应用的属性进行sorting。
jQuery使用insertAfter（）或insertBefore（）这很容易。
<div class="left">content</div> <div class="right">sidebar</div>
<script> $('.right').insertBefore('left'); </script>
