移动视图顶部的 Bootstrap 4 右列

Posted 2023-03-06

【中文标题】移动视图顶部的 Bootstrap 4 右列

【英文标题】：Bootstrap 4 right Column on top on mobile view

【发布时间】：2018-04-05 19:59:31

【问题描述】：

我有一个像这样的 Bootstrap 4 页面：

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

看起来像：

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

因此，如果我在移动设备上查看它，A 列在顶部，但我希望 B 列在顶部。这可能吗？我尝试了推拉，但没有成功，因为我使用的是 Bootstrap 4。

【问题讨论】：

Column ordering in Bootstrap 4的可能重复

【参考方案1】：

借助 Bootstrap 4，您可以使用以下类。

order-first、order-last 和 order-0 - order-12

在您的元素上。

看看这里：Column ordering in Bootstrap 4

【讨论】：

为最后一个元素添加 order-sm-first 类

【参考方案2】：

你试过这样吗

<div class="row">
    <div class="col-md-8 col-sm-8 col-xs-8">
        A
    </div>
    <div class="col-md-4 col-sm-4 col-xs-4">
       B
    </div>
</div>

Bootstrap 网格系统有四个类col-xs、col-sm、col-md、col-lg。可以组合这些类来创建更加动态和灵活的布局。

【讨论】：

试过了。有用 。如果我们检查节点也可以工作。我使用 pug 来编写 web 应用程序而不是 html。填充常常让我头疼。

【参考方案3】：

没有一个答案给出了一个代码示例来说明order-first 是如何工作的，所以你去吧：

<div class="row">
    <div class="col-md-8">
        A
    </div>
    <div class="col-md-4 order-first order-md-last">
       B
    </div>
</div>

在桌面视图（md、lg 和 xl）中，它将使用 order-md-last 来保留当前行为（B 低于 A）

在移动视图（xs 和 sm）中，它现在将使用 order-first 来订购 BA。