Как свертстать такие элементы?

Question

[franciskoEU]

Друзья, подскажите пожалуйста как правильно сверстать этот элемент? Это вид на мобильных при 320px, соответственно, при разришении экрана блоки которые сейчас наполовину вылазят за пределы должны постепенно появляться. Я думал их разпихать с помощью абсолютного позиционирования, но не могу понять как это сделать. Вот собственно макет для мобайла


А вот для декстопа.
В идеале, конечно, хотелось чтобы после 992px блоки сами стали в эту сетку, но наверное придеться делать отдельные блоки для телефонов и ПК и показывать их через медиа запросы.

Answer 1

[ReActor Дмитрий Вершанский]

Прячьте их абсолютным позиционированием

img {
    position: absolute;
    left: -150px;
}

Соответственно применяя каждую конкретную позицию опираясь на media-запрос

Comments

[franciskoEU]

Спасибо, за ответ. Я приблизительно так и делал, но как тогда сделать чтобы при увеличении экрана они появлялись?

[ReActor Дмитрий Вершанский]

завязывайтесь не на фиксированных единицах (px), а на относительных величинах (%), при правильном выборе величины значения, вы получите желаемое поведение элементов

Answer 2

[franciskoEU]

Решил следующим образом, велосипед, но уж как смог)
Для всего section дал dislpay: flex; flex-direction: column; aling-items-center;
Для блоков которые вылазят за края создал блок-обертку, которой дал dislpay: flex; flex-wrap
Для самих этих блоков задал position: relative (чтобы не выпадал из потока при разширении) и спозиционировал как на макете.
Больше всего смущает дополнительный блок обертка, ну да ладно)

Answer 3

[Ольга Ветер]

может просто дизайнеру руки оборвать?