如何在移动版面上更改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-pushcol-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 headline3 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 captionfloat: 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使用不同的网格集,并且不会与这些示例一起使用。

http://jsfiddle.net/b9chris/52VtD/16632/

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>