Change columns order in bootstrap 3
Posted
by
TNK
on Stack Overflow
See other posts from Stack Overflow
or by TNK
Published on 2014-06-04T03:21:58Z
Indexed on
2014/06/04
3:24 UTC
Read the original article
Hit count: 130
twitter-bootstrap
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.
© Stack Overflow or respective owner