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

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

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

Размер экрана 600px (или w/e не имеет значения) Я хочу, чтобы второй 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

Ответ 1

Я знаю, что вы спрашиваете, как это сделать, используя float, но насколько я знаю, используя чистый CSS, это невозможно (по крайней мере, без использования неприятного позиционирования, о котором вы говорили, что вы не хотите этого делать).

Насколько я знаю, единственный хороший способ добиться этого с помощью чистого HTML/CSS - использовать новую flexbox спецификацию (хорошей отправной точкой, вероятно, будет эта статья css tricks).

Когда вы используете flexbox, вы можете использовать свойство order на элементах, чтобы определять, какие элементы заказа отображаются в (duh)

Вы можете увидеть пример этого в действии здесь, код HTML похож на то, что у вас есть, с добавленным элементом оболочки (я также зафиксировал объявление DOCTYPE ):

<!DOCTYPE html>
<div class="wrapper">
    <div class="yellow">
    </div>
    <div class="red">
    </div>
</div>

CSS немного отличается:

.wrapper {
  display: flex;
  flex-flow: row wrap;
}

.yellow {
    background: yellow;
    width: 20%;
    height: 300px;
}

.red {
    background: red;
    width: 20%;
    height: 300px;
}

@media screen and (max-width:600px) {
    .yellow {
        order: 2;
        width: 100%;
    }

    .red {
        order: 1;
        width: 100%;
    }
}

Я также немного почистил его, у вас был дублирующий код в медиа-запросе, который не обязательно должен был быть там.

Единственным недостатком этого является то, что в настоящее время он работает только около 80% браузеров:

http://caniuse.com/#search=flexbox

В зависимости от целевого рынка, который может быть в порядке, вы можете использовать грамотное ухудшение, чтобы оно отображалось правильно во всех отношениях, кроме заказа на устройствах, которые не поддерживают flexbox полностью.

Я думаю, вы также на самом деле ориентируетесь на мобильные устройства с переупорядочивающими вещами, поддержка там хороша, так что это может сработать для вас.

Ответ 2

Вот простое решение, использующее отрицательные поля и поплавки.

Для CSS используйте следующее:

@media screen and (max-width:600px) {
    .yellow {
        background: yellow;
        width: 100%;
        height: 300px;
        float:left;
        margin-top: 300px;
    }

    .red {
        background: red;
        width: 100%;
        height: 300px;
        float:left;
        margin-left: -100%;
    }
}

Ваш HTML остается таким же, как и вы.

Добавьте верхний край к .yellow, используя margin-top: 300px (равный высоте красный div).

Для красного div добавьте отрицательное левое поле 100%.

Это заставит красный div поместить себя над желтым div, но так как вы есть желтый div, верхний край, желтый div появляется под красным div.

Трюк аналогичен трюку, используемому для дизайна макета с 3 колонками Holy Grail.

Смотрите демонстрацию: http://jsfiddle.net/audetwebdesign/jux84wzk/

Ответ 3

Попробуйте изменить

HTML для этого -

<div class="container">
  <div class="yellow"></div>
  <div class="red"></div>
</div>

и ваш CSS-запрос @media для этого -

@media screen and (max-width:600px) {
.container{
    display:flex;
    flex-direction: column-reverse;
}
.yellow {
    background: yellow;
    width: 100%;
    height: 300px;

}

.red {
    background: red;
    width: 100%;
    height: 300px;


} }

Ответ 4

Пока нет первых мобильных ответов, в которых меньше строк css и других преимуществ. Это затрагивает html, так что это не вопрос OP, поскольку CSS подходит только к нему Flexbox ответ от двух других подглядываний, которые я проголосовал.

DEMO: http://jsfiddle.net/mhrf6d4n/

HTML, сначала поставьте исходный порядок наименьшего окна просмотра:

<div class="red"></div>
<div class="yellow"></div>

CSS (помещайте общие, глобальные ко всем видовым экранам вне медиа-запросов, объединяйте разделяемые селектора, затем после установки минимальной ширины и размещайте свои поплавки)

.yellow, .red {
    background: yellow;
    height: 300px;
}
.red {
    background: red;
}

@media screen and (min-width:600px) {
    .yellow, .red {
        float:left;
        width:50%;
    }
}