Question

我有一个 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。

Answer 1

你试过这样的

吗？

<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。可以组合这些类来创建更加动态和灵活的布局。

Answer 2

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

先订购，订购最后订单和订单-0 - 订单-12

在你的元素上。

看看这里：Column ordering in Bootstrap 4

Answer 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 订购 B above A。

Bootstrap 4右侧列在移动视图的顶部

3 个答案: