JSFIDDLE

Quiero cambiar el orden de divs flotantes en un cierto tamaño de píxel.

En el estado predeterminado, ambos tienen un ancho del 50% y están uno al lado del otro.

Por debajo del tamaño de pantalla de 600 px (o w / e no importa) Quiero que el segundo div (rojo) flote por encima del primer div (el amarillo).

¿Cómo es esto posible con la única solución CSS?

HTML

<div class="yellow"></div>
<div class="red"></div>

CSS

.yellow {
    background: yellow;
    width: 50%;
    height: 300px;
    float:left;
}

.red {
    background: red;
    width: 50%;
    height: 300px;
    float:left;
}

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

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

La solución que quiero es:

DIV ROJO

DIV AMARILLO

pero ahora es:

DIV AMARILLO

DIV ROJO