JSFIDDLE

Ich möchte die Reihenfolge der Floated Divs bei einer bestimmten Pixelgröße ändern.

m Standardzustand haben beide eine Breite von 50% und sind nebeneinander.

Below 600px Bildschirmgröße (oder w / e spielt keine Rolle) Ich möchte, dass das zweite Div (rotes) über dem ersten Div (gelbes) schwebt.

Wie ist das nur mit einer CSS-Lösung möglich?

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;
    }
}

Die Lösung, die ich will, ist:

RED DIV

YELLOW DIV

aber jetzt ist es:

YELLOW DIV

RED DIV