Анна Седунова | Вёрстка на GetCourse, оформление аккаунтов, процессы GetCourse
Наука · 18 февраля 2026 г.
Давно я не писала, а обычно на это есть две основные причины: я в отпуске, либо я глубо...
Давно я не писала, а обычно на это есть две основные причины: я в отпуске, либо я глубоко в разработке чего-то нового и интересного 😉 Как раз сейчас происходит второе. Но об этом позднее. А пока по следам проходящего обучения курса по лендингам хочу поделиться полезным решением для блока Две колонки с произвольным контентом на примере оформления блока с экспертом. Адаптация Геткурс устроена таким образом, что на узких экранах правая колонка встаёт под левой колонкой. А в вариантах с фотографиями экспертов это не всегда удачное решение. Можно обойтись встроенным функционалом, создав два блока: для десктоп и для мобильных. Но с помощью CSS можно сделать гораздо быстрее. Внизу пример кода, который позволит поменять порядок размещения блоков и на узких экранах правую колонку разместить над левой. В параметре (max-width: 727px) укажите своё значение ширины экрана, с которой на вашей страницы происходит отображение колонок друг под другом: @media screen and (max-width: 727px) { .my-container.flex-container { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .builder.flex-column { -webkit-box-flex: 1; -ms-flex: 1 1 100%; flex: 1 1 100%; } }