Ändern Sie die Reihenfolge der verschobenen Divs mit CSS
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