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

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

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

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

5e5f5e3a3b274813191589.png
5e5f5e4a5d5e0621882061.png

Спасибо.
  • Вопрос задан
  • 2735 просмотров
Решения вопроса 3
Lord_Dantes
@Lord_Dantes
муз. канал t.me/blackstreet69th
Верстаете с помощью флексов, в адаптиве используете order, и меняете местами.
Ответ написан
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Либо гридами либо на десктопе выносить видео/картинку абсолютом https://jsfiddle.net/q1e8s5mr/
Есть еще альтернатива: поставить картинку первой в коде.
На десктопах ей задавать float (не забудьте clearfix).
На мобилках расставить правильные order.
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
@Svenb9
Front
Упаси боже слушать комментарии которые выше.
Какие float в 2020 году.. минимум флекс. Нет. На grid. И никаких дублирования кода. Тем более js. Css уже может многое
Ответ написан
sashabeep
@sashabeep
Дней без вопросов про Slick на тостере : 0
А что-то мешает сдублировать уже загруженную картинку с уже загруженными стилями вместо выдумывания велосипедов?
Ответ написан
@alexks23kz
Все просто.
Заголовок float: left;
Картинка float: right;
Описание clear:left;
При необходимости фиксируем ширину(%).
На мобилке убираем float и убираем ограничение по ширине.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы