I have been struggling with rearranging two divs that are stacked vertically on mobile. I want the second div to appear above the first when the screen size is reduced. Despite trying various methods such as flexbox order and direction, I have not been successful in achieving this desired outcome.
Here are some of the methods I have attempted: How can I reorder my divs with CSS?
If anyone could provide assistance or guidance on how to accomplish this, it would be greatly appreciated.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3" id="flex">
<div class="bg-light text-dark mr-md-3 pt-3 px-3 pt-md-5 px-md-5 overflow-hidden" id="a">
<div class="my-3 p-3">
<p>Test</p>
</div>
</div>
<div class="bg-dark text-white mr-md-3 pt-3 px-3 pt-md-5 px-md-5 overflow-hidden" id="b">
<div class="my-3 p-3">
<p>Test</p>
</div>
</div>
</div>