Изменить порядок плавающих div с помощью CSS
Я хочу изменить порядок плавающих 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