I've been struggling to rearrange my bootstrap columns for mobile view, but my code just isn't cooperating. It's likely that I'm making a mistake somewhere.
Here is the snippet of my code:
<div class="container">
<div class="row text-center">
<div class="col-12">
<h2 class="mb-lg-4 mb-sm-3">Early Stages</h2>
</div>
<div class="col-md-7 col-sm-push-5">
<p>Also known as 'the Poor Fellow-Soldiers of Christ and of the Temple of Solomon', the Knights Templars were originally founded circa 1120 CE, by Hugues de Payens, as a means to protect Christian pilgrims to the Holy Land. It was originally intended that nine Templars would protect the pilgrims.</p>
</div>
<div class="col-md-5 col-sm-push-7">
Image Here
</div>
</div><!--/row-->
</div>
My goal is to move the "Image Here" section above the "also known as the poor etc." section when viewed on mobile (col-sm). I tried referring to Bootstrap's guide, but I might be misinterpreting it. Can someone provide me with a correct example?
Thank you in advance