Адаптация составных блоков

Если мы смотрите этот сайт на большом экране, разницы между экземплярами вы не увидите. Но попробуйте теперь уменьшить размер экрана!

Если лень - посмотрите скриншоты:

Как мы получили такие разные варианты? Давайте покажем.

Первый брейкпоинт: 1200

Все 4 варианта ведут себя в этой точке перехода одинаково: избавляются от телефона. В настройках оформления этого блока в точке 1200 указано скрытие блока:

Вторая точка перехода: 1000 пикселей

В этот момент у всех блоков убирается меню, но перестраиваются они по-разному. 

Первый блок

Справа появляется элемент "скрытый слой". Он там всегда был, но в его настройках на ширине от 1000 пикселей было установлено скрытие блока, а ниже 1000 - отображение. В этот скрытый слой добавлено универсальное меню.

Второй блок

В точке 1000 и ниже скрывается не только меню, но и сниппеты, у всех них в настройках стоит "скрытие блока" в диапазоне ширины экрана 1000 и ниже. И точно так же, как в первом случае, у блока "скрытый слой" стоит обратное правило: от 1000 скрыто, до 1000 не скрыто. Но уже в этот скрытый слой добавлено не только меню, но и сниппеты.

Третий и четвертый блоки

Они претерпевают более серьезные изменения, которые не реализовать изменением компоновки и скрытием отдельных элементов. Поэтому в точке 1000 мы скрываем не блоки, а весь контейнер, вклчаящий логотип, меню и сниппеты. А вместо него с обратной настройкой - до тысячи показывать, от тысячи скрывать - встает другой контейнер, уже с красным фоном, в котором переопределена палитра так, чтобы основным цветом стал белый. Собственно, механика третьего и четвертого вариантов одинакова, разница только в компоновке блоков внутри контейнера.

Третья точка перехода: 450

Она влияет только на первый блок: к логотипу опасно приблизились иконки сниппетов и скоро на него наедут. В этой точке перехода мы просто меняем ширину логотипа со 150 до 100 пикселей.