Как поменять порядок div для адаптивности, или может возможно сделать это проще?

Question

[del993788]

Здравствуйте. Есть 6 блоков, из них 4 маленьких и 2 больших. В каждом блоке будет храниться своя информация. Вот пример codepen.io/anon/pen/VeKxqK?editors=110 . Для ширины 1000px идёт своё положение блоков, для ширины 700px - своё. Подскажите, как сделать своё положение для ширины в 500px . В идеале должно быть так: 2 синих, красный, 2 синих, красный. А так же возможен вариант: 2 синих, красный, красный, 2 синих. Крутил, вертел, но так и не добился своего.Чтобы добиться результата в 500px, мне нужно поменять местами некоторые блоки, но тогда я теряю порядок в 1000 и 700px. Как изменить порядок div?

Answer 1

[Назар Мокринский]

1) Забудьте про float что он вообще существует, используйте display: flex вместо него
2) Используйте CSS свойство order, которое легко и непринужденно меняет порядок элементов при использовании display: flex

Comments

[Роман Огарков]

А как же кроссбраузерность, чувак?

[Назар Мокринский]

Роман Огарков: Отлично caniuse.com/#search=flex

[Роман Огарков]

Назар Мокринский: IE 10 держит, что делать с 30% динозавров на IE 8 - 9? Win 7 ещё ни кто не отменял

[Назар Мокринский]

Роман Огарков: 30% IE 8 - 9? Это что за сайт у вас О_о?
Тут даже Microsoft отказывается от IE11- с нового года, а вы про какие-то мифические IE8-9.

[Роман Огарков]

Назар Мокринский: Ахахха, ты не поверишь, у нас в конторе от IE6 есть заказчики.

[Назар Мокринский]

Роман Огарков: Даже на Windows XP ставится IE8. И это жесткие убыточные ентерпрайз где всё очень печально. Типичные пользователи не пользуются IE8 в абсолютном большинстве случаев, а исключения можно проигнорировать, так или иначе обновятся.

[Роман Огарков]

Назар Мокринский: Я тоже такого мнения. IE вообще надо игнорить.

[Сергей delphinpro]

Роман Огарков: 30% ??? Вы где такие цифры берете? IE8-10 в сумме двух процентов не набирают, про ie7 я вообще молчу. Вымерли они.

[Сергей delphinpro]

Для ie8-9 буквально на днях появился полифил https://github.com/10up/flexibility
Я правда его еще не применял, ничего конкретного сказать не могу по эффективности.

[Роман Огарков]

Сергей: 30% от всех пользователей IE

[Сергей delphinpro]

Роман Огарков: Я бы сделал флексом, а 30% пользователей IE вполне смогли бы смотреть на сайт с неправильным расположением блоков. Включаем принцип - главное доступность информации, а внешние плюшки.

[Сергей delphinpro]

* а не внешние плюшки

[Борис Якушев]

"свойство order"
А можно за него поподробнее? Не совсем понял что вы ввиду имеете, а очень интересно узнать.

[Назар Мокринский]

Борис Якушев: OK, Google...
> CSS order

Answer 2

[Pretor DH]

Подойдет?

codepen.io/PretorDH/pen/wMzXqQ?editors=110

Comments

[del993788]

Не совсем то, но спасибо

Answer 3

[del993788]

Хочу выразить свою благодарность Назару. Ранее я о flex'е не знал.

Если кому пригодиться https://jsfiddle.net/09uahc88/

Answer 4

[Роман Огарков]

jQuery в помощь для манипуляций с DOM. Также есть плагины для плиточного расположения блоков. Так же на jQuery. Если нет надобности в кроссбраузерности, то можно воспользоваться советом Назара.