Какая должна быть разметка в данном случае?

[borus]

Здравствуйте.

 

Пытаюсь освоить адаптивный дизайн с bootstrap. Но пока не понимаю какая должна быть html разметка. С толку сводит например то, что на широком экране лого, телефон, магазины и корзина идут выше строки с меню, а в компоновке для узкого экрана - после меню. Или например поиск находит в сайдбаре на широком экране, но на узком в верхней строке после кнопки меню.

Вот схема широкого экрана:

А вот узкого:

 

Объясните пожалуйста как решаются такие противоречия в адаптивной вёрстке? С помощью разного абсолютного позиционирования в медиа запросах css?..

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

Edited May 11, 2015 by borus

[coolhtml]

Даров, Борис. Есть жеж документация по бустрапу даже на русском. http://bootstrap-3.ru/index.php

[borus]

Даров, Борис. Есть жеж документация по бустрапу даже на русском. http://bootstrap-3.ru/index.php

Доброе утро!

 

Спасибо, стили я изучаю, но пока не понимаю в какой последовательности все-таки должны идти эти блоки в html коде. Ведь последовательность размещения блоков в двух представленных картинках фундаментально различается на мой взгляд. Может я нарисовал несовместимые в одном шаблоне схемы?

[rus]

display: block; & display: none; - это для элементов которые нужно прятать и показывать при определенном разрешении экрана, и на сколько я понимаю вам при этом не нужно будет один и тот же элемент использовать для разных назначений.

[borus]

display: block; & display: none; - это для элементов которые нужно прятать и показывать при определенном разрешении экрана, и на сколько я понимаю вам при этом не нужно будет один и тот же элемент использовать для разных назначений.

а в какой последовательности вы бы поставили блоки в html? как в мобильной версии или как в десктопной?