CSS flex. слева 1, справа 2. Как сделать подобное (+)?

Question

[Дмитрий]

Проблема в адаптивности. То есть, на ПК я должен видеть картинку слева, а справа 2 блока, причем эти 2 блока должны быть выравнены по высоте относительно картинки.

А в мобильном на первое место должен встать заголовок, ниже картинка, ниже текст.

Понимаю, что @media-запросы + flex order, то не решается головоломка. Может быть кто-то подскажет?

Comments

[Антон Литвиненко]

я не придумал как на флексах

Answer 1

[DanielTonne]

Вариант на гридах подойдет?

Comments

[Дмитрий]

Спасибо. Это то, что надо.
Только теперь нужно иметь возможность дать ширину картинке 60% , а тексту справа 40%.
Есть ли у вас решение?

[DanielTonne]

Дмитрий, блоку с картинкой задаете max-width: 60%;, блокам с текстом 40%. С отступами при необходимости думаю справитесь :)

P.S для мобильных устройств через медиа-запросы максимальную ширину меняете на 100%.

[DanielTonne]

Дмитрий, вы можете создать блоки-обертки, которые расположите с помощью grid-areas, а внутри блоков уже можете делать собственную структуру хоть на Flex, хоть на Grid.

[DanielTonne]

Дмитрий, обновленный вариант.

[Дмитрий]

Да, я разобрался, спасибо.
Но тут нерешенный вопрос относительно вертикального выравнивания справа. Оно либо все по верхнему краю, либо все по центру собственных ячеек.
Видимо, метод грид здесь не подойдёт и придётся городить костыль в виде вторгго заголовка, который будет показываться/ скрываться пр необходимости НАД картинкой

[DanielTonne]

Дмитрий, если я Вас правильно понял, то можно реализовать вот так.

[Дмитрий]

Благодарю за внимание, я учту ваши советы в будущем.