How to reverse the order of elements in media quer

问题:

I have two divs, left and right, but when screen is less than for example 500px then left div become bottom div and right div becomes top div, div first in DOM should displays as second and second div as first.

I use display: flex, then divs are reversed but displays inline and ignore 100% width. What is wrong?

HTML

<div class='nav'>
    <div class='container'>
        <div class='left_bottom'>
            LEFT/BOTTOM
        </div>
        <div class='right_top'>
            RIGHT/TOP
        </div>
    </div>
</div>

CSS

.nav{
    background-color: red;
}
.container{
    width: 100%;
}
.left_bottom{
    padding: 15px 0 15px 0;
    background-color: green;
    float: left;
    width: 33.33%;
    text-align: center;
}
.right_top{
    padding: 15px 0 15px 0;
    background-color: blue;
    float: right;
    width: 66.66%;
    text-align: center;
}
@media (max-width: 500px){
    .left_bottom{
        float: left;
        width: 100%;
    }
    .right_top{
        float: left;
        width: 100%;
    }
    .container{
        display: flex;
        flex-direction: row-reverse;
    } 
}

JS FIDDLE

回答1:

Try this, it should work the way you wanted. let me know any issues.

.nav{
    background-color: red;
}
.container{
    width: 100%;
}
.left_bottom{
    padding: 15px 0 15px 0;
    background-color: green;
    float: left;
    width: 33.33%;
    text-align: center;
}
.right_top{
    padding: 15px 0 15px 0;
    background-color: blue;
    float: right;
    width: 66.66%;
    text-align: center;
}
@media (max-width: 500px)
    {
        .left_bottom{
            float: left;
            width: 100%;
        }
        .right_top{
            float: left;
            width: 100%;
        }
        
    }

    <div class='nav'>
        <div class='container'>
          <div class='right_top'>
                RIGHT/TOP
            </div>  
          <div class='left_bottom'>
                LEFT/BOTTOM
            </div>
            
        </div>
    </div>

回答2:

I suggest to use flexbox for all the layout (including desktop and mobile).

For desktop:

.container{
    display: flex;
}

For mobile (option 1):

@media (max-width: 500px){
    .container{
        flex-direction: column; /*display as column*/
    } 
    .left_bottom{
        order: 2; /*reorder to bottom*/
        width: 100%; /*make full width*/
    }
    .right_top{
        order: 1; /*reorder to top*/
        width: 100%; /*make full width*/
    }
}

jsFiddle

For mobile (option 2):

@media (max-width: 500px){
    .container{
        flex-direction: column-reverse; /*column & reverse*/
    } 
    .left_bottom, .right_top{
        width: 100%; /*make full width*/
    }
}

jsFiddle

回答3:

You can try something like this :

<div class="container">
    <div class="right_top">RIGHT/TOP</div>
    <div class="left_bottom">LEFT/BOTTOM</div>
</div>

And the CSS :

.container {
    width:100%;
    text-align:center;
}
.left_bottom {
    padding:15px 0;
    background-color: green;
    float:left;
    width:33.33%;
}
.right_top {
    padding:15px 0;
    background-color: blue;
    float:right;
    width:66.66%;
}
@media (max-width: 500px) {
    .left_bottom,
    .right_top {
        width:100%;
        float:none;
        clear:both;
}

http://jsfiddle.net/lddz/Ln0bq7eg/

回答4:

Apply a class of order-first to your red block, and in your CSS media query, apply something similar to this:

.order-first {
  order: 1;
}

...assuming that you are using flexbox CSS.