How to properly use bootstrap push and pull - html

Question

I've been trying to re-order my bootstrap columns when in mobile view but my code is just not working. Most probably because I am doing something incorrect.
Here is my markup:
<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 &apos;the Poor Fellow-Soldiers of Christ and of the Temple of Solomon&apos;, 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>
What I am trying to do is essentially make the "Image Here" section go above the "also known as the poor etc." section when in mobile view (col-sm). I looked at Bootstraps guide but I think I am understanding it incorrectly, can someone show me how its done?
Thanks in advance

Answer 1

Try this HTML
<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-5 col-sm-push-7">
Image Here
</div>
<div class="col-md-7 col-sm-pull-5">
<p>Also known as &apos;the Poor Fellow-Soldiers of Christ and of the Temple of Solomon&apos;, 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>
<!--/row-->
Link for reference
hope this helps..