右引导移动视图顶部的列

我有一个这样的引导页面:

<div class="row">
<div class="col-md-6">
A
</div>
<div class="col-md-6">
B
</div>
</div>

看起来像:

-----
|A|B|
-----

因此，如果我在移动设备上看它，列 A 在顶部，但我希望 B 在顶部。 这可能吗？ 我试过用推拉的方法，但是没有用。

95747 次浏览
小开
最佳答案

使用 列顺序完成此操作。

col-md-push-6将“推”列到右6，而 col-md-pull-6将“拉”列到左边的“ md”或更大的视图端口。在任何较小的视图端口上，列将恢复正常顺序。

我觉得是什么把人们吓跑了，你必须在 HTML 中把 B 放在 A 的上面。可能有一种不同的方法可以做到这一点，在 HTML 中 A 可以超过 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>

视图-端口 > = md

|A|B|

View-port < md

|B|
|A|
小开

值得注意的是，如果使用的列不同时等于6，那么推送量将不等于初始列大小。

如果你有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>

否则，列的对齐方式将显示为关闭。

小开

柔性方向

For Bootstrap 4, apply one of the following to your .row div:

.flex-row-reverse

对于响应设置:

.flex-sm-row-reverse
.flex-md-row-reverse
.flex-lg-row-reverse
.flex-xl-row-reverse
小开

下面的代码适合我

.row {
display: flex;
flex-direction: column-reverse;
}
小开

在 Bootstrap V4(发布于2018年1月18日)中，您可以在 Reordering 选项卡下使用 Reordering Classs.Info。

Https://getbootstrap.com/docs/4.0/layout/grid/

小开

我用:

.row {
display: flex;
flex-direction: row-reverse;
}
小开

现在可以通过添加 order-# 类来完成(在 Bootstrap v4中)。

参见 https://getbootstrap.com/docs/4.1/migration/#grid-system-1

像这样:

<div classname='col-md-8 order-2'>...</div>
<div classname='col-md-4 order-1'>...</div>
小开

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

你可以省略上面的 order-1和 order-2。只是为了说清楚。默认顺序将是列在 html 中出现的顺序。

了解更多信息

小开

这个方法在 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>
小开

Bootstrap 4包括用于 flex 的类。 请参见: < a href = “ https://getbootstrap.com/docs/4.3/layution- for-layp/”rel = “ nofollow norefrer”> 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>
小开

我有三个引导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>

希望这个能帮上忙。我发现很难理解这一点，但最终得到了这个线程的帮助，但它是一个有点碰运气。


提交答案