Ordem de alteração de divs flutuantes com CSS
Quero alterar a ordem das divs flutuadas em um determinado tamanho de pixel.
No estado padrão, ambos têm 50% de largura e estão próximos um do outro.
Abaixo do tamanho da tela de 600px (ou w / e não importa), quero que a segunda div (vermelha) flutue acima da primeira div (amarela).
Como isso é possível com a solução somente 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;
}
}
A solução que eu quero é:
DIV VERMELHO
DIV AMARELO
mas agora é:
DIV AMARELO
DIV VERMELHO