Как расположить списки друг под другом с CSS grid, где каждый элемент списка — ячейка сетки?

Здравствуйте.

Есть такая сетка

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

На дексктопе в таком виде проблем нет. Но нужно отобразить эти списки в мобильной версии сначала список 1, а под ним список 2.

Как это сделать? Ничего в голову не приходит, кроме как каждой ячейке списка задавать имя и потом в grid-template-areas выставлять нужное положение. Но ячеек может быть много и это будет как-то неправильно выглядеть с таким раздутымgrid-template-areas.