.order-sm-12/1 没有按预期工作 Bootstrap 5

Question

你好我有一个非常简单的html结构：

<div class="col-md-3 order-sm-last ms-auto">
        Hello!
</div>
<div class="col-md-9 order-sm-first">
        Welcome!
</div>

注意：这2个<div>元素放在一个container和一个row.

里面

目标是：

在大屏幕上 Hello! 之后显示 Welcome!，在小屏幕上，我希望它在 Welcome!.

下显示 Hello!

但是使用上面的代码只是在任何类型的屏幕上分别将 Hello! 放在 Welcome! 之后和下面！

我在这里做错了什么？提前致谢！

Answer 1

您需要在 div 上实现顺序 class 以及顺序 - {col size}。这对我有用。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<div class="container">
<div class="row">
 <div class="order-2 order-md-9 col-md-9">
            Hello!
    </div>
    <div class="order-1 order-md-3 col-md-3">
            Welcome!
    </div>
</div>
</div>

.order-sm-12/1 没有按预期工作 Bootstrap 5

.order-sm-12/1 does not work as intended Bootstrap 5

html

css

twitter-bootstrap