Change order of floated divs with CSS

Question

JSFIDDLE

I want to change the order of floated divs at a certain pixel size.

At default state they both have 50% width and they are next to

Answer 1

Here is a simple solution using negative margins and floats.

For the CSS, use the following:

@media screen and (max-width:600px) {
    .yellow {
        background: yellow;
        width: 100%;
        height: 300px;
        float:left;
        margin-top: 300px;
    }

    .red {
        background: red;
        width: 100%;
        height: 300px;
        float:left;
        margin-left: -100%;
    }
}

Your HTML remains the same as you posted.

Add a top margin to .yellow using margin-top: 300px (equal to the height of the red div).

For the red div, add a negative left margin of 100%.

This will force the red div to position itself over the yellow div, but since you have the yellow div a top margin, the yellow div pops out under the red div.

The trick is similar to that used for the Holy Grail 3-column layout design.

See demo: http://jsfiddle.net/audetwebdesign/jux84wzk/