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

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!

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Solution	Source