JSFIDDLE

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