Как грамотно сверстать адаптивную сетку этого блока?

Question

[Сергей К]

Как грамотно сверстать адаптивную сетку этого блока

Comments

[Ольга]

Для этого нужно знать, а как оно должно выглядеть на других разрешениях, и потом уже принимать решение о стратегии

[Ankhena]

Что мы видим в макете:
нумерованный список с текстом.
У каждого элемента кроме последнего по три украшения.
Стрелки можно убрать в фон (или всего списка или элемента).
Останется два псевдоэлемента: один используем под счетчик через counter-reset, couter-increment, другой для svg'шки.
И дальше через nth-child располагаете текст и псевдо в каждой li.

Answer 1

[TheSnegok]

Разделить на 3 блока: Верхний где 3 пунтка, средний со стрелочками и нижний с 2 пунктами (всё можно флексами чтобы потом проще делать адаптивность).

Comments

[Вадим]

ну тогда уж гридами, а не флексами.
Что если в адаптиве на мобильном всё будет в колонку идти и текст должен быть под иконкой?
По Вашему варианту второй пункт в первой строке (с цифрой3) как тогда попадёт под третий пункт второй строки на флексах?

[SuperToster]

Вадим,
:nth-child(even) и flex order?

[Вадим]

SuperToster, не думаю что есть смысл дальше погружаться в дискуссию даже без абстрактного примера разметки :-)

[SuperToster]

Вадим, https://jsfiddle.net/hu67z1Lv/