I've been working with Bootstrap and I'm facing an issue with the orientation of a div on small screens. On medium screens, I have two columns set to 6, 6 which should stack on top of each other on smaller screens. Here's how I want it to look: example image
On small screens, the columns are currently displaying as column 3 on top of column 4, but I want column 4 on top of column 3. How can I achieve this? I believe it may involve using push-pull properties, but I am struggling to implement it.
EDIT: This is the code I am currently using, but I need to modify it to achieve the layout shown in the screenshot I provided:
<div class="row">
<div class="col-md-6">
column 3
</div>
<div class="col-md-6">
column 4
</div>
</div>