Cambiar el orden de divs flotantes con CSS
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