Change columns order in bootstrap 3
- by TNK
I am trying to change bootstrap columns order in desktop and mobile screen.
<div class="container">
<div class="row">
<section class="content-secondary col-sm-4">
<h4>Don't Miss!</h4>
<p>Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at ultrices est.</p>
<p><a class="btn btn-primary pull-right" href="#">Read more <span class="icon fa fa-arrow-circle-right"></span></a></p>
<h4>Check it out</h4>
<p>Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at ultrices est.</p>
<p><a class="btn btn-primary pull-right" href="#">Read more <span class="icon fa fa-arrow-circle-right"></span></a></p>
<h4>Finally</h4>
<p>Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at ultrices est.</p>
<p><a class="btn btn-primary pull-right" href="#">Read more <span class="icon fa fa-arrow-circle-right"></span></a></p>
</section>
<section class="content-primary col-sm-8">
<div class="main-content"
...........
...........
</div>
</section>
</div><!-- /.row -->
</div><!-- /.container -->
View Port = SM columns order should be :
|content- secondary | content-primary |
View Port < SM columns order should be :
| content-primary |
|content- secondary |
I tried it something like this using 'pulland 'push clases.
<div class="row">
<section class="content-secondary col-sm-4 col-sm-push-4">
Content ......
</section>
<section class="content-primary col-sm-8 col-sm-pull-8">
Content ......
</section>
</div>
But this is not working for me. Hope someone will help me out.
Thank you.
