Как сверстать такой layout?

Question

[Андрей]

Вот такой

Хочется найти элегантное решение. Суть в следующем: на десктопе имеется две колонки, content и sidebar. На мобилке sidebar переезжает в середину блока content. Для реализации на grid sidebar должен находиться внутри блока content, что не очень удобно:

.content {
    display: grid;
    grid-template-columns: 1fr 300px;
    grid-template-areas: "content sidebar" "content sidebar" .... // И вот так столько раз, сколько будет строк в сетке (grid row), а их количество неизвестно. 
}