Html 移动视图顶部的 Bootstrap 右列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20979062/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap right Column on top on mobile view
提问by schnawel007
I have a Bootstrap Page like this:
我有一个像这样的引导页面：
<div class="row">
<div class="col-md-6">
A
</div>
<div class="col-md-6">
B
</div>
</div>
Looks like:
好像：
-----
|A|B|
-----
So if I look at it on a mobile Device, the Column A is on top, but I want the B on top. Is this possible? I tried it with push an pull, but it didn't work.
因此，如果我在移动设备上查看它，A 列在顶部，但我希望 B 列在顶部。这可能吗？我用推拉试了一下，但没有用。
回答by Schmalzy
Use Column orderingto accomplish this.
使用列排序来完成此操作。
col-md-push-6will "push" the column to the right 6 and col-md-pull-6will "pull" the column to the left on "md" or greater view-ports. On any smaller view-ports the columns will be in normal order again.
col-md-push-6会将列“推”到右侧 6col-md-pull-6并将“拉”列到“md”或更大视口的左侧。在任何较小的视口上，列将再次处于正常顺序。
I think what throws people off, is that you have to put B above A in your HTML. There may be a different way to do this where A can go above B in the HTML, but I'm not sure how to do it...
我认为让人们失望的是，您必须在 HTML 中将 B 放在 A 之上。可能有一种不同的方法来做到这一点，其中 A 可以在 HTML 中高于 B，但我不知道该怎么做......
<div class="row">
<div class="col-md-6 col-md-push-6">B</div>
<div class="col-md-6 col-md-pull-6">A</div>
</div>
view-port >= md
视口 >= md
|A|B|
view-port < md
视口 < md
|B|
|A|
回答by apritch
It's worth noting that if you are using columns that are not both equal to 6, then the push amount will not equal the initial column size.
值得注意的是，如果您使用的列不等于 6，则推送量将不等于初始列大小。
If you have 2 columns (A & B) and wish for column A to be smaller and to the right on "sm" or greater viewports, but atop a mobile (xs) viewport, you would use the following:
如果您有 2 列（A 和 B）并且希望 A 列在“sm”或更大的视口上更小并位于右侧，但在移动 (xs) 视口上，您可以使用以下内容：
<div class="row">
<div class="col-sm-4 col-sm-push-8">A</div>
<div class="col-sm-8 col-sm-pull-4">B</div>
</div>
Otherwise, the alignment of the columns will appear off.
否则，列的对齐方式将出现偏差。
回答by salmanhijazi
For Bootstrap 4, apply one of the following to your .row div:
对于 Bootstrap 4，将以下其中一项应用到您的 .row div：
.flex-row-reverse
For responsive settings:
对于响应式设置：
.flex-sm-row-reverse
.flex-md-row-reverse
.flex-lg-row-reverse
.flex-xl-row-reverse
回答by Abram
In Bootstrap 4, let's say you want to have one order for large screens and a different order for smaller screens:
在 Bootstrap 4 中，假设您希望为大屏幕设置一个订单，为小屏幕设置不同的订单：
<div class="container">
<div class="row">
<div class="col-6 order-1 order-lg-2">
This column will be ordered second on large to extra large screens
</div>
<div class="col-6 order-2 order-lg-1">
This column will be ordered first on large to extra large screens
</div>
</div>
</div>
You can omit order-1and order-2above. Just added for clarity. Default order will be the order the columns appear in the html.
您可以省略order-1和order-2以上。只是为了清楚起见添加了。默认顺序将是列在 html 中出现的顺序。
For more info https://getbootstrap.com/docs/4.1/layout/grid/#reordering
有关更多信息https://getbootstrap.com/docs/4.1/layout/grid/#reordering
回答by Sword I
The below code work for me
下面的代码对我有用
.row {
display: flex;
flex-direction: column-reverse;
}
回答by Onno Faber
This is now done (in Bootstrap v4) by adding order-# classes.
现在通过添加 order-# 类来完成（在 Bootstrap v4 中）。
See https://getbootstrap.com/docs/4.1/migration/#grid-system-1
请参阅https://getbootstrap.com/docs/4.1/migration/#grid-system-1
Like this:
像这样：
<div classname='col-md-8 order-2'>...</div>
<div classname='col-md-4 order-1'>...</div>
回答by M61Vulcan
I have three bootstrap 4 columns of different sizes. As the screen gets smaller the third column is hidden, then when the screen gets smaller still and the divs are stacked the order changes so that column 2 is at the top.
我有三个不同大小的 bootstrap 4 列。随着屏幕变小，第三列被隐藏，然后当屏幕变小并且 div 堆叠时，顺序会发生变化，因此第 2 列位于顶部。
<div class="col-xs-12 col-sm-4 col-md-3 order-2 order-sm-1">
<h3>LEFT HAND SECTION</h3>
<p>For news, links photos or comments.</p>
</div>
<div class="col-xs-12 col-sm-8 col-md-5 order-1 order-sm-2">
<h3>MAIN SECTION</h3>
<p>The main content for the page.</p>
</div>
<div class="col-xs-12 col-md-4 d-none d-md-block order-last">
<h3>BLANK SECTION</h3>
<p>Will usually just be blank.</p>
</div>
I hope this helps. I found it difficult to understand this but finally got there with the help of this thread, but it was a bit hit and miss.
我希望这有帮助。我发现很难理解这一点，但最终在这个线程的帮助下到达了那里，但它有点受挫。
回答by tomb
This worked for me on Bootstrap 4:
这在 Bootstrap 4 上对我有用：
<div class="container-fluid">
<div class="row">
<div class="col-md-4 order-md-last">
<%= render 'form'%>
</div>
<div class="col-md-8 order-md-first">
CONTENT
</div>
</div>
</div>
回答by Eric Conner
I used:
我用了：
.row {
display: flex;
flex-direction: row-reverse;
}
回答by heady12
Bootstrap 4 includes classes for flex. See: https://getbootstrap.com/docs/4.3/layout/utilities-for-layout/
Bootstrap 4 包括用于 flex 的类。请参阅：https: //getbootstrap.com/docs/4.3/layout/utilities-for-layout/
<div class="row flex-column-reverse flex-md-row">
<div class="col-sm-10">
Col 1
</div>
<div class="col-sm-2">
Col 2
</div>
</div>
