Двухколоночная адаптивная вёрстка с приоритетом контентного блока

Запилите на бутстрапе и сделайте то что надо с помощью классов push и pull

А есть живой пример похожей вёрстки, чтобы прям показать, что способ рабочий? Сам я последний раз верстал сайт в те времена, когда слово "суши" было глаголом, от бутсрапов нещадно отстал 🤪 Могут быть проблемы с аргументацией

http://itchief.ru/lessons/bootstrap-3/85-bootstrap-3-reordering-columns-grid-system

тут можно глянуть как работает, увеличивая и уменьшая окно браузера

Ваши верстальщики правы, тут никаким бутстрапом не поможешь (насколько я знаю) . Если абсолюткой позиционировать, то верстка будет сыпаться при изменении коетента. Решить проблему можно при помощи js-а - при разных ширинах менять местами блоки, но это костыль еще тот. Самый оптимальный вариант, о котором ваши верстальщики говорят, это использовать flexbox. В нем есть свойство order, позволяет менять местами блоки, не трогая разметку.

В посте написано, что сайт адаптивен и без резины. Это можно реализовать даже без бутстрапа с помощью медиаправил. Нет в верстке ничего невозможного. Бывают просто интересные задачи.

Так вопрос был в том, как поменять положение блока, не меняя разметки. Ответ - flexbox.

Адаптив - это набор правил под разные разрешения экрана.

Что мешает описать абсолютное позиционирование для всех нужных разрешений?

а как при абсолютном позиционировании добавлять/удалять контент?

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

Не нужно там абсолютное позиционирование и флексбоксы. Кроссбраузерно это решается на JS. На бутстрапе такое спокойно можно сделать. Логичнее конечно будет немного поменять разметку, но как я понял, важна не сама разметка, а чтобы важный для SEO контент находился как можно выше в коде.

Коллеги, огромное всем спасибо за поддержку темы!

Бутстрап мы с ними пока не обсуждали

Контент может меняться только в синем, красном и жёлтых блоках. Все остальные блоки статичны. Жёлтый по своему местоположению может быть релативным.

Абсолютное позиционирование, на сколько я помню, задаёт начало координат. Опускаем синий блок на высоту шапки, а всю шапку поднимаем в 0:0. Красный и синий меняем местами с помощью float. Первый план был именно такой. Но я на нём не настаиваю, если есть более изящное решение - было бы здорово его найти.

О, я по своему древнему опыту помню такие костыли 🙄 Хотелось бы их избежать :)

Они почему-то предпочитают говорить загадками и не называть вещи своими именами, поэтому flexbox ли это мы можем только догадываться. На сайте сейчас суммарно около 10% трафика с Сафари 9 и IE 10... Если flexbox - тот самый вариант, о котором они говорят и он действительно не дружит с этими браузерами, то это не решение проблемы, а пачка новых проблем :o

Хороший подход 🍻

В моём представлении - ничего. Ну, видимо, у нынешних верстальщиков своё мнение на этот счёт.

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

Совершенно верно, хочется убрать все лишние строки между началом страницы и началом контента.