Hello I have a very simple html structure:

<div >
        Hello!
</div>
<div >
        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!

CodePudding user response：

You need to implement 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/[email protected]/dist/css/bootstrap.min.css">
<div >
<div >
 <div >
            Hello!
    </div>
    <div >
            Welcome!
    </div>
</div>
</div>