Having trouble with the layout on smaller screens - I want the image above the button but below the text. I'm new to bootstrap and haven't been able to figure it out by reading the docs. Can someone please help me identify the issue and explain why it's happening? Thanks!
<div class="row">
<div class="col-sm-6 text-center h-80 text-center">
<p style="display: flex;
padding-inline-start: 140px;
justify-content: center;
margin: 0;
align-items: center;
text-align: center;
font-family: Dancing Script, 'sans serif';
width: 80%;
height: 50%;
color: white;
font-size: 80px">So you want to travel the world</p>
<p style=" display: flex;
color: white;
padding-inline-start: 60px;
width: 100%;
height: 20%;
font-size: 30px;">I do not have millions in the bank but I am making it happen without stress or worry.</p>
<button style="border: none;
color: white;
font-size: 30px;
background-color: rgba(201,115,116,255);
border-radius: 5px;
height: 60px;
cursor: pointer;
width: 400px;">Download!</button>
</div>
<div class="col-md-6 text-center">
<img src="images/Digital Download! (1).png" id="img-fluid" class="img-fluid" style="height: 700px; width: 1300px;" alt="">
</div>
</div>
</div>