Как верстаются такие блоки адаптивно?

Question

[Vadim Bogomazov]

Доброго времени суток.

Часто в дизах встречается такое, что есть две колонки, слева текст и заголовок, справа видео или изображение. В адаптиве изображение становится между заголовком и текстом.
Есть хороший вариант сверстать это без костылей - дублирования и js? Гриды?

Показано на скринах.




Спасибо.

Comments

[WapSter]

flex box: order чем не угодил

[maralov]

ордер не решит эту проблему

[Алекс Глебов]

Раньше я бы объяснил дизайнеру, как работает стандартная сетка, и что костыли в каждом блоке мне не нужны. Но теперь есть гриды)

[RAX7]

flexbox + float

[Vadim Bogomazov]

RAX7, перенесите пожалуйста в ответы.

[art style]

Какой JS? это делается на обычном css
даже я веб-макака знаю это

Answer 1

[Lord_Dantes]

Верстаете с помощью флексов, в адаптиве используете order, и меняете местами.

Comments

[Vadim Bogomazov]

Это имеете ввиду?
Так с сожалению заголовок выпадает из колонок и правую часть приходится выше подтягивать.
Но кажется лучше способа нет, спасибо.

[maralov]

Vadim Bogomazov, неплохо, только заголовок не на одном уровне с картинкой

Answer 2

[Ankhena]

Либо гридами либо на десктопе выносить видео/картинку абсолютом https://jsfiddle.net/q1e8s5mr/
Есть еще альтернатива: поставить картинку первой в коде.
На десктопах ей задавать float (не забудьте clearfix).
На мобилках расставить правильные order.

Answer 3

[RAX7]

flexbox + float

Answer 4

[Dima]

Упаси боже слушать комментарии которые выше.
Какие float в 2020 году.. минимум флекс. Нет. На grid. И никаких дублирования кода. Тем более js. Css уже может многое

Comments

[Vladislav Katrich]

Абсолютно согласен. 2020 и float - несовместимые вещи

[alexks23kz]

А что, в 2020 году float не работает?
Конкретная задача была решаема с помощью правил css2.

Answer 5

[alexks23kz]

Все просто.
Заголовок float: left;
Картинка float: right;
Описание clear:left;
При необходимости фиксируем ширину(%).
На мобилке убираем float и убираем ограничение по ширине.

Comments

[Lord_Dantes]

Vadim Bogomazov, это не правильный ответ убери его