How to change the display order of items using Bootstrap 3

Question

Can someone help me. I'm trying to think how can I do this using bootstrap, who has the key? I don’t know how you can change the display order of the elements; I think its playing around with floats and cleaning. Please help, I need help. I use Bootstrap 3 for flexible layouts, how can you change the display order only with css?

Answer 1

@skelly is correct, you can use the push and pull classes to change the display order of elements. These classes do not always give you the right solution.

There are many other questions about this, see for example: You need to be able to change the grid on a mobile phone

Due to the fact that you want to change the 100% width line (yellow line) in the mobile (xs grid) / tablet (md grid), you cannot solve this problem by floating and / or clicking and pulling.

I also believe that you cannot do thsi with CSS only without fixing some parameters.

When I look at the heights of some of your elements, known / fixed for different views, I can solve it using css and media queries: http://bootply.com/85303

CSS

@media (max-width: 768px) { .yellow {margin-top:-60px;} .orange {margin-top:40px;} .col-xs-12{float:left;} } @media (min-width: 992px) and (max-width:1199px) { .col-md-12 {float:left;} .darkgreen{float:right; margin-top:-60px;} } @media (min-width: 1200px) { .blue{margin-top:-60px} } 

HTML

 <div class="container"> <div class="row"> <div class="col-lg-12 col-md-12 col-xs-12" style="background-color:red;">&nbsp;</div> </div> <div class="row"> <div class="orange col-lg-12 col-md-8 col-xs-12" style="background-color:orange;">&nbsp;</div> <div class="yellow col-lg-8 col-md-12 col-xs-12" style=""> <div class="row"> <div class="col-lg-6 col-xs-12" style="background-color:yellow;height:40px;">1</div> <div class="col-lg-6 visible-lg" style="background-color:yellow;height:40px;">2</div> <div class="col-lg-6 visible-lg" style="background-color:yellow;height:40px;">3</div> <div class="col-lg-6 visible-lg" style="background-color:yellow;height:40px;">4</div> </div> </div> <div class="darkgreen col-lg-4 col-md-4 col-xs-12" style="background-color:darkgreen;">&nbsp;</div> <div class="pink col-lg-8 col-md-12 col-xs-12" style="background-color:pink;">&nbsp;</div> <div class="blue col-lg-4 col-md-12 col-xs-12" style="background-color:blue;height:40px;">&nbsp;</div> </div> </div> 

Note that some elements are modified by adding a (negative) top margin. I can do this only when I know their height. Also note that I am adding float: left for col-xs-12 and col-xs-12 .

In a real situation, when you do not know the height, you can try to calculate it using javascript (use response.js for media queriesmaybe) and add the upper fields. I don't know if this will give you a better solution when you use jQuery to control your DOM, see Add a new row and change the column classes when resizing