Как бы вы сверстали такой блок?

Question

[JeannieGold]

Прошу советов по адаптивной верстке вот этого вот.

Answer 1

[Ivan Bogachev]

Как говорится, ябзаверстал (за магические числа в примере ответственности не несу, был пьян).

Можно взять базовую разметку:

.project-timeline
    .step
        .number 1
        .content Lorem ipsum dolor sit amet.
    .step
        .number 2
        .content Lorem ipsum dolor sit amet.
    ....

С помощью CSS-трансформаций перевернуть половину элементов, а их содержимое перевернуть еще раз.

получится что-то такое

На маленьких экранах все повернуть еще раз.

получится вот так

---
CodePen

Answer 2

[Александр Синицын]

Просить дизайнера прочитать то, что он нарисовал, дергая глазами вверх-вниз. Потом попросить представить это на мобильном... и пусть убьется )))

Comments

[Сергей Горячев]

По методике восстановления зрения профессора Жданова

8-е упражнение))))))
Так может быть дизайнер даже услугу людям оказывает)))

[JeannieGold]

Сергей Горячев: Более того, дизайнер не поленился и в одном из блоков разработал новое упражнение:



Такое ощущение, что макет делал эпилептик, уж больно пикрелейтед напоминает работу во время припадка (сразу вырисовывается причинно-следственная связь, сперва дизайнер нарисовал блок с цифрами, попрыгал по ним взглядом, что привело к припадку, и следующий блок получился у бедолаги хаотичной кашей).

Буду считать, что этот выкидыш был сделан с заботой о людях, мб офтальмолог по образованию недавно перекатился в дизайн.

[Сергей Горячев]

JeannieGold: какой ужас)))))))))))))

Answer 3

[Astrohas]

согласен с Александр Синицын , выглядит хреново.
Самый банальный способ реализации через ul li. Причем структура примерно следующая:

li.top>.text+.number+.line
li.bottom > .line+.number+.text

Также можно сделать и через ::before/::after.
Для мобилок сделайте в виде вертикального таймлайна

Answer 4

[Артём Ведищев]

Мой вариант
https://jsfiddle.net/kepeszvx/
Но вариант Александра Синицына лучше

Answer 5

[Максим]

https://codepen.io/simkaUser/pen/RZRdxp но для мобильника надо думать версию ..