我如何在移动布局上改变引导3列顺序?

我正在制作一个顶部固定导航条的响应式布局。下面有两列，一列是边栏(3)，一列是内容(9)，在桌面上看起来是这样的

< p >导航条< br / > [3] [9] < / p >

当我resize移动时，navbar被压缩并隐藏，然后边栏被堆叠在内容的顶部，如下所示:

< p >导航条< br / > [3] < br / > [9] < / p >

我想在顶部的主要内容，所以我需要改变移动的顺序为:

< p >导航条< br / > [9] < br / > [3] < / p >

我发现这篇文章涵盖了相同的点，但接受的答案已被编辑说，解决方案不适用于Bootstrap的当前版本。

如何在移动设备上重新排序这些列?或者，我如何能得到边栏列表组到我的扩展导航栏?

这是我的代码:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">


<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<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-->

301649 次浏览
小开
最佳答案

你不能在小屏幕中改变列的顺序，但在大屏幕中可以这样做。

改变列的顺序。

<!--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，我们可以在大屏幕上重新排列列，并在左边显示边栏，在右边显示主要内容。

小提琴在这里工作。

小开

引导3答案

这里的答案只适用于2个单元格，但一旦这些列中有更多的单元格，就会导致稍微复杂一些。我认为我已经找到了一个适用于多列任意数量单元格的通用解。

目标

在移动设备上获得标签的垂直序列，以平板电脑/台式机上的设计要求的任何顺序排列自己。在这个具体的例子中，一个标记必须比正常情况下更早进入flow，而另一个必须比正常情况下更晚进入flow。

移动

[1 headline]
[2 image]
[3 qty]
[4 caption]
[5 desc]

平板电脑+

[2 image  ][1 headline]
[         ][3 qty     ]
[         ][5 desc    ]
[4 caption][          ]
[         ][          ]

因此，在平板电脑+上，标题需要右移，从技术上讲，desc也是如此——它位于移动设备上的标题标签之上。你马上就会看到4个标题也有麻烦了。

让我们假设每个单元格的高度不同，并且需要与下一个单元格从上到下保持齐平(排除了像桌子这样的弱技巧)。

与所有的Bootstrap Grid问题一样，第一步是要意识到HTML必须在页面上按移动顺序排列，1 2 3 4 5。然后，确定如何让平板电脑/台式机以这种方式重新排序-理想情况下不需要Javascript。

让1 headline和3 qty坐在右边而不是左边的解决方案是简单地将它们都设置为pull-right。这将应用CSS float: right，这意味着它们将找到第一个适合右边的开放空间。您可以认为浏览器的CSS处理器是按照以下顺序工作的:1适合右上角。2是下一个，是常规的(float: left)，所以它会被移到左上角。然后是3，float: right，所以它跳到1下面。

但是这个解决方案对于4 caption;因为右边的两个单元格太短了，所以左边的2 image往往比它们加起来还要长。Bootstrap Grid是一个美化的float hack，意思是4 caption是float: left。由于2 image在左侧占据了如此多的空间，4 caption试图放入下一个可用空间——通常是右列，而不是我们想要的左边。

这里的解决方案(以及更普遍的任何类似的问题)是添加一个黑客标签，隐藏在移动设备上，存在于平板电脑+上，将标题推出，然后被负边缘覆盖-就像这样:

[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; }
}

所以，这里的通用解决方案是添加可以在移动设备上消失的黑客标签。在平板电脑+ hack标签允许显示的标签出现在更早或更晚的流程中，然后向上或向下拉，以掩盖这些hack标签。

注意:我已经使用固定高度的简单例子在链接jsfiddle，但实际的网站内容，我正在工作在所有5个标签的高度变化。它在标签高度上有较大的差异，特别是图像和描述。

注2:取决于你的布局，你可能在tablet+(或更大的分辨率)上有足够一致的列顺序，这样你就可以避免使用hack标记，而是使用margin-bottom，如下所示:

注3:使用引导3。Bootstrap 4使用了不同的网格集，不能用于这些示例。

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

小开

使用jQuery，使用insertAfter()或insertBefore()，这非常容易:

<div class="left">content</div>
<div class="right">sidebar</div>


<script>
$('.right').insertBefore('left');
</script>

如果你想为移动设备设置一个条件，你可以这样做:

<script>
var $iW = $(window).innerWidth();
if ($iW < 992){
$('.right').insertBefore('.left');
}else{
$('.right').insertAfter('.left');
}
</script>

< p >的例子 https://jsfiddle.net/w9n27k23/ < / p >
小开

更新2018

对于基于引导3的原始问题，解决方案是使用推拉。

在引导4，现在是可能的改变顺序，即使这些列是全宽堆叠的垂直，感谢Bootstrap 4 flexbox。OFC中，push - pull方法仍然可以工作，但是现在在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屏幕使用order-first:

<div class="row">
<div class="col-md-3">
sidebar
</div>
<div class="col-md-9 order-first order-md-last">
main
</div>
</div>

Bootstrap 4(alpha 6): http://www.codeply.com/go/bBMOsvtJhD
Bootstrap 4.1: https://www.codeply.com/go/e0v77yGtcr

原来的3。x回答

对于基于引导3的原始问题，对于较大的宽度，解决方案是使用推拉，然后列将显示它们在较小(xs)宽度上的自然顺序。(A-B转B-A)。

<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>

引导3:http://www.codeply.com/go/wgzJXs3gel

@emre声明，“你不能在小屏幕中改变列的顺序，但在大屏幕中可以这样做”。但是，在引导3中应该澄清:“您不能更改full-width "stacked" columns..”。

小开

首先从手机版本开始，你可以在大多数情况下实现你想要的。

例子:

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解决方案。一个对我有用的方法。

CSS的“Order”属性，结合媒体查询，可以用来重新排序列时，他们被堆叠在较小的屏幕。

就像这样:

@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，导航栏、侧边栏和内容可以被定位，然后对媒体查询中应用的属性进行排序。

小开

在引导4中，如果你想这样做:

    Mobile  |   Desktop
-----------------------------
A       |       A
C       |   B       C
B       |       D
D       |

你需要反转B和C的顺序，然后将order-{breakpoint}-first应用于B。并应用两个不同的设置，一个将使它们共享相同的cols，另一个将使它们采用12 cols的全宽度:

  • 更小的屏幕:12 cols到B和12 cols到C

  • 大屏幕:12 cols (B + C = 12)

像这样

<div class='row no-gutters'>
<div class='col-12'>
A
</div>
<div class='col-12'>
<div class='row no-gutters'>
<div class='col-12 col-md-6'>
C
</div>
<div class='col-12 col-md-6 order-md-first'>
B
</div>
</div>
</div>
<div class='col-12'>
D
</div>
</div>

演示: https://codepen.io/anon/pen/wXLGKa

小开

这很简单，写你的html的方式，你想要它在移动中被查看。然后使用bootstrap 订单类，你可以安排如何在桌面上查看它。

<html>
<head>
<title>Order View</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="row">
<div class="col order-md-2">
<h1>IMAGE</h1>
</div>
<div class="col order-md-1">
<h1>TEXT</h1>
</div>
</body>
</html>

提交答案