Как изменить порядок элементов?

Question

[nen0y]

Как изменить порядок элементов, когда ширина экрана будет меньше 520рх? Используя только свойства CSS.
Второй должен стать на место третьего, а третий на место второго.
https://jsfiddle.net/4xafsm3y/1/

Comments

[Ankhena]

grid и media и поменять разметку

[nen0y]

Ankhena, с flex order не получилось, возможно неверно обратился к классу.

[Ankhena]

nen0y, я уже поменяла комментарий ))

[nen0y]

Ankhena, а как что-бы сохранить такую же структуру?

[Ankhena]

nen0y,

а как что-бы сохранить такую же структуру?

А зачем? В смысле, чего ради нужны эти обертки? Там фон или что в макете?
Нарисуйте как должно быть на 520. Все 4 друг под другом?

[Aetae]

С помощью css нельзя просто поменять местами элементы, находящихся в разных контейнерах.
Так что либо grid, либо javascript, либо @media и очень извращённая возня с позиционированием.