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: 98

Filed under:

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

Related posts about twitter-bootstrap