Изменить порядок плавающих div с помощью CSS

JSFIDDLE

Я хочу изменить порядок плавающих div с определенным размером пикселя.

В состоянии по умолчанию они имеют ширину 50% и находятся рядом друг с другом.

Размер экрана ниже 600 пикселей (или не имеет значения) Я хочу, чтобы второй div (красный) плавал над первым div (желтым).

Как это возможно с помощью решения только 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;
    }
}

Решение, которое я хочу, это:

RED DIV

ЖЕЛТЫЙ DIV

но сейчас это:

ЖЕЛТЫЙ DIV

RED DIV