Bootstrap change div order with pull-right pull-left on 3 columns

Question

I   ve been working on this the whole day but don   t come up with a solution  I have 3 columns in one row in a container   1  right content     pull-right  2  navigation     pull-left  3  main content  What it looks on big screens   ------------------------------------------------     Menu         Content         Right Content   ------------------------------------------------   What it should look like on smaller screens   ----------------------------    Menu     Right Content              ------------------             Content          ----------------------------   What it looks like now   ------------------   Right Content    ------------------   Menu   Content   ------------------   I think it   s just a simple floating problem  But I tried out nearly all possibilities

User · Answer

Try this      lt div class  row  gt       lt div class  col-xs-3  gt          Menu      lt  div gt       lt div class  col-xs-9  gt           lt div class  row  gt             lt div class  col-sm-4 col-sm-push-8  gt            Right content            lt  div gt             lt div class  col-sm-8 col-sm-pull-4  gt            Content            lt  div gt          lt  div gt       lt  div gt   lt  div gt    Bootply

User · Answer

Bootstrap 3 Using Bootstrap 3 s grid system   lt div class  quot container quot  gt     lt div class  quot row quot  gt       lt div class  quot col-xs-4 quot  gt Menu lt  div gt       lt div class  quot col-xs-8 quot  gt         lt div class  quot row quot  gt           lt div class  quot col-md-4 col-md-push-8 quot  gt Right Content lt  div gt           lt div class  quot col-md-8 col-md-pull-4 quot  gt Content lt  div gt         lt  div gt       lt  div gt     lt  div gt   lt  div gt   Working example  http   bootply com 93614 Explanation First  we set two columns that will stay in place no matter the screen resolution  col-xs-    Next  we divide the larger  right hand column in to two columns that will collapse on top of each other on tablet sized devices and lower  col-md-    Finally  we shift the display order using the matching class  col-md- push pull -    You push the first column over by the amount of the second  and pull the second by the amount of the first

[css] Bootstrap change div order with pull-right, pull-left on 3 columns

Bootply

Examples related to css

Examples related to twitter-bootstrap

Examples related to css-float

Examples related to twitter-bootstrap-3