在移动视图顶部的Bootstrap右列

Question

我有一个像这样的Bootstrap页面:

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

好像:

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

因此,如果我在移动设备上查看它,列A位于顶部,但我希望B位于顶部.这可能吗？我试着推拉,但它没有用.

Answer 1

使用列排序来完成此操作.另请参阅有关列排序的这篇文章

col-md-push-6将该列"推"到右侧6,col-md-pull-6并将"拉"到"md"或更大视口的左侧列.在任何较小的视口上,列将再次按正常顺序排列.

我想是什么引起了人们的注意,就是你必须在你的HTML中将B放在A之上.可能有一种不同的方法可以做到这一点,A可以在HTML中超过B,但我不知道该怎么做...

DEMO

<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

|A|B|

view-port <md

|B|
|A|

Answer 2

值得注意的是,如果您使用的列不等于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>

否则,列的对齐将显示为关闭.

Answer 3

Flexbox方向

对于Bootstrap 4,请将以下其中一项应用于.row div:

.flex-row-reverse

对于响应设置:

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

Answer 4

现在通过添加 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>

Answer 5

以下代码适合我

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

Answer 6

在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中出现的顺序。

有关更多信息https://getbootstrap.com/docs/4.1/layout/grid/#reordering

Answer 7

我有三个不同大小的 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>

我希望这有帮助。我发现很难理解这一点，但最终在这个线程的帮助下到达了那里，但它有点受挫。