This is an example of the structure of my webpage:
<div class="container new-container">
<div class="row">
<div class="col-md-4 info">
....
</div>
<div class="col-md-8 contact-form">
....
</div>
</div>
</div>
On a larger screen, my info section is on the left and my contact form is on the right. However, when I resize the screen to see how it appears on mobile or smaller screens,
The layout changes so that the info area is on one row and the contact form is on the next row, which is the expected behavior.
However, I am noticing that the design looks different as it expects the contact form to be above the info area on smaller screens.
Is there a CSS property or method that allows me to maintain the current layout and keep the order of these elements only on smaller screen resolutions?