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

Question

[ZipZaper]

Есть такой вариант расположить блоки, слева десктоп справа мобилки. Десктоп у меня сверстан на флексах, следовательно текст обернут в див, а потом на мобилке мне надо параграф как бы вытащить из обертки для текста. Как красиво сделать? В голову сразу пришел способ с дисплей none, но не хочется его использовать. Может быть можно как то на гридах сделать?

Answer 1

[Вадим]

Современный способ - на гридах с помощью grid-teamplate-areas.
https://habr.com/ru/post/500580/

Нужно задать всем участвующим элементам
grid-area, например, title для заголовка, text для текста и img для картинки
а родительскому блоку указать, например grid-teamplate-areas: 'title title' 'text img' для одного разрешения и
grid-teamplate-areas: 'title img' 'text text' для другого.

Comments

[ZipZaper]

Спасибо за ответ, я обертке задал

grid-template-columns: repeat(3, minmax(min-content, 1fr))

grid-template-rows: repeat(3, minmax(min-content, 1fr))

и там уже каждому элементу прописывал grid-column\grid-row.
Я правильно понимаю, что это одно и тоже только по разному записано?

[Вадим]

ZipZaper, Не совсем. template-columns\rows описывают размеры областей в сетке, а grid-template-areas описывают какие элементы будут располагаться в этих областях.
То есть эти свойства лучше комбинировать.