How to reorder bootstrap columns based on mobile view - html

Question

I have seen there are some examples of using push/pull with bootstrap 3 but I haven't had much like trying it out. Is it possible in this example to get col-sm-4 content to show before col-sm-5 col-lg-12 on mobile as col-sm-4is currently showing last on mobile.
<section id="inner-page" class="container">
<div class="row">
<div class="col-lg-8 col-sm-7">
<div class="post-media">
<div id="slider" class="flexslider">
<ul class="slides">
<li></li>
</ul>
</div>
<div id="carousel" class="flexslider">
<ul class="slides">
<li></li>
</ul>
</div>
</div>
<div class="row mTop-20">
<div class="col-sm-5 col-lg-12">
content
</div>
</div>
</div>
<div class="col-sm-4">
content
</div>
</div>
</section>

Answer 1

With Bootstrap 3
You can use push and pull classes
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div style="border: 1px solid red" class="col-sm-4 col-lg-push-8 col-sm-push-7">
content
</div>
<div style="border: 1px solid green" class="col-lg-8 col-sm-7 col-sm-pull-4">
<div class="post-media">
<div id="slider" class="flexslider">
<ul class="slides">
<li></li>
</ul>
</div>
<div id="carousel" class="flexslider">
<ul class="slides">
<li></li>
</ul>
</div>
</div>
<div class="row mTop-20">
<div class="col-sm-5 col-lg-12">
content
</div>
</div>
</div>
</div>
With Bootstrap 5
You can use the order property
add the class order-0 order-sm-2 for col-sm-4 and the classe order-1 for col-sm-7
or the flex-direction property
add the classes flex-column-reverse flex-sm-row for the row