CSS Grid перемещает столбцы при изменении размера экрана ⇐ CSS

[Anonymous]

Я изо всех сил пытаюсь придумать хороший способ настройки элементов сетки на HTML-странице. У меня есть несколько диаграмм, каждая из которых имеет предыдущую и текущую версии. Иногда они имеют разную высоту, поэтому я решил использовать два столбца и столько строк, сколько необходимо, с предыдущими диаграммами слева и текущими диаграммами справа:

Код: Выделить всё

Previous
Current
Previous
Current

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


Узкий:


Как заставить это работать с сеткой CSS или с каким-нибудь другим простым CSS? Я не против переупорядочить элементы в HTML, если они правильно упорядочены на дисплее.

Подробнее здесь: https://stackoverflow.com/questions/786 ... en-resizes