@KhalBay

Как адаптировать картинку между заголовком и описанием?

Частенько сталкиваюсь с дизайнами что-то вроде такого (необходимо на декстопе чтобы была фотка и справа от неё заголовок и описание, а в мобилке чтобы фотка вклинивалась между заголовком и текстом):
627d119e19606759194677.png
Обычно создаю доп. контейнер для мобильный версии, но вопрос возможно ли обойтись без него, и если возможно использовать только flex. Ну и конечно же без использования js и jq.

Для примера вот код контейнера который надо стилизовать как на картинке:

<div class="cont">
        <div class="img"></div>
        <div class="text">
            <div class="title">Hi</div>
            <div class="desc">Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi</div>
        </div>
</div>


.cont {
        display: flex;
        gap: 20px;
    }
    .img {
        width: 400px;
        height: 200px;
        background-color: grey;
    }
    .title {
        width: 200px;
        height: 50px;
        background-color: grey;
        color: white;
        margin: 0 0 50px 0;
    }
    .desc {
        width: 200px;
        height: 100px;
        background-color: grey;
        color: white;
    }

Знаю что можно сделать такую адаптивность с помощью гридов, но вот чисто спортивный интерес)
  • Вопрос задан
  • 54 просмотра
Пригласить эксперта
Ваш ответ на вопрос

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

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