How To Reverse The Order Of Elements In Media Queries?

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 s

Solution 1:

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

Solution 2:

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

.nav{
    background-color: red;
}
.container{
    width: 100%;
}
.left_bottom{
    padding: 15px015px0;
    background-color: green;
    float: left;
    width: 33.33%;
    text-align: center;
}
.right_top{
    padding: 15px015px0;
    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%;
        }
        
    }

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

Solution 3:

You can try something like this :

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

And the CSS :

.container {
    width:100%;
    text-align:center;
}
.left_bottom {
    padding:15px0;
    background-color: green;
    float:left;
    width:33.33%;
}
.right_top {
    padding:15px0;
    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/

Solution 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.