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

Question

[Сергей Колесник]

Провожу свой личный проект по верстке сайта с нуля. И в конце столкнулся с вопросом об адаптивности сайта для различных девайсов. В процессе решения вопроса у меня получилось добиться адаптивности сайта, но есть нужда в определенном дизайне. Где при использовании смартфонов блоки с элементами будут перестраиваться в колонну и причем в другом порядке. Сначала logo, потом block1 и следом block2:



Меня интересует как сделать адаптивность для смартфонов с изменением порядка и расположения элементов?

Answer 1

[hzzzzl]

учи сразу флексы, намного проще чем вот это всё с float / position: absolute итп

Comments

[Сергей Колесник]

Этот вариант то что нужно, но он работает только при сужении окна браузера на пк. Проверяя на смартфоне перестраивание не работает. Почему так?

[hzzzzl]

есть этот магический тэг в head документа?

<meta name="viewport" content="width=device-width, initial-scale=1.0">

https://www.w3schools.com/css/css_rwd_viewport.asp

[Сергей Колесник]

Был но был не правильно написан, благодарю. Вопрос решен!

[Darya Shvakh]

Сергей Колесник, если с флексами тогда обязательно с префиксами

Answer 2

[Антон Шаманов]

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

Comments

[Игорь Стасюк]

CSS'ом проще, если хорошо владаешь флекбоксом или гридами. А насчёт разных шаблонов, абсолютно согласен, но не всегда дизайнеры готовы дать нужный пакет макетов, а тем более иконок и картинок.... Чаще всего приходиться подстраиваться под нужды одного отдельного шаблона с шириной 1280

[Антон Шаманов]

Игорь Стасюк, css проще только если нужно поменять порядок пары элементов.

не всегда дизайнеры готовы дать нужный пакет макетов

это проблемы дизайнера/заказчика - всегда слал лесом клиентов без макетов и т.з.

[Сергей Колесник]

Звучит просто и интересно. Может есть какие-либо советы где более доступно можно изучить информацию по поводу созданию разных шаблонов?
Пока не доводилось изучать данную тему.

[Антон Шаманов]

Сергей Колесник, https://search.google.com/test/mobile-friendly + https://habr.com/ru/post/327108/ (хотя это уже другая песня)