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

March 1, 2022

Hello I have a very simple html structure:

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

note: These 2 <div> elements are placed inside a container and a row.

Goal is to:

Have Welcome! being displayed after Hello! on large screens,
and on small screens I wanted it to display Hello! under Welcome!.

but using the code above simply puts Hello! after and under Welcome! on any type of screen respectively!

What am I doing wrong here? Thanks in advance!

>Solution :

You need to use the order class along with the order-{col size} on the divs. This works for me.

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