How can I change the display order of elements using Bootstrap 3

问题

can somebody help me I am trying to think how can i do this using bootstrap, anyone have a clue? I dont know how can you change the display order of elements, i guess its playing around with floats and clears. Please help i need help. I am using Bootstrap 3 for the responsive layouts, how can you change the display order only using css?

回答1:

@skelly is right you could use the push and pull classes to change the display order of elements. These classes don't give you the right solution always.

There are many other questions about this, see for example: Need to be able to swap grid on mobile

Cause you want to change a 100% width row (the yellow row) in the mobile (xs grid) / tablet view (md grid) you can't solve this with floating and / or push and pull.

I also believe you can't do thsi with CSS only without fixing some parameters.

When i consider the height of some of your elements known / fixed for different views, i can solve it with 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 some elements are changed by adding a (negative) top-margin. I can do this only when i know their height. Also notice i add a float:left for col-xs-12 and col-xs-12.

In the real situation where you don't know the height you could try to calculate it with javascript ( use respond.js for media queriesmaybe ) and add the top-margins. I don't know if this will give you a better solution then when you use jQuery to manipulate your DOM, see: Add new row and changing column classes on resize

来源：https://stackoverflow.com/questions/19157165/how-can-i-change-the-display-order-of-elements-using-bootstrap-3

标签

twitter-bootstrap

twitter-bootstrap-3

elements