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

Question

[vikas_web]

десктоп


а мобилка на скрине ниже

мобилка

https://jsfiddle.net/9wb8r0pu/1/

Comments

[Алексей Дубровин]

Десктоп, как сейчас. Это как?

[vikas_web]

Алексей Дубровин, обновила вопрос

[Алексей Дубровин]

vikas_web,
https://jsfiddle.net/v36k79mq/7/
Вынес в логический блок 2,3 элемент.
Теперь думаю будет легко

[Ankhena]

Алексей Дубровин, зачем лишняя разметка, когда есть гриды?

vikas_web используйте гриды и перестраивайте легко что хотите.

[vikas_web]

Ankhena, а так плохо? https://jsfiddle.net/4mfkq5jp/

[Ankhena]

vikas_web, контента побольше добавьте (и в разных комбинациях) и сами посмотрите, плохо так или подходит.

[vikas_web]

Ankhena, нормально
я о засорянии разметки

[Ankhena]

vikas_web, я ведь не знаю, что в макете и зачем вам нужны внутренние обертки ;)
Если это только ради построения такой сетки флексами, то это дичь полная.

[vikas_web]

Ankhena, тоесть использовать исключительно гриды в данном случае?

[Ankhena]

vikas_web, вы можете выбрать любой вариант, хоть абсолют+js.
Но гридами это решается проще и логичнее всего.

[vikas_web]

Ankhena, мобилка еще понятно
а как дестоп?
не подскажете. пожалуйста
закоментированный вариант для мобилки ( вроде как получился)
https://jsfiddle.net/rkwdebLp/3/

[Ankhena]

vikas_web, например, так https://jsfiddle.net/La6rdy4g/
Но я не знаю, что в макете и как оно должно себя вести при переполнении.
Другой вариант: вы можете делать пустые столбцы для отступов между 1-2 и 2-3.

[vikas_web]

Ankhena, спасибо, только чтобы не было вот такого (2 строки), то лучше вместо min-content
сделать max-content? https://jsfiddle.net/d2qags4h/1/

[Ankhena]

vikas_web, да, можно max-content