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

Суть вопроса в заголовке, вот наглядный пример того, что хочу сделать.

Проблема в том, что для desktop версии должно быть две колонки - content и sidebar, но чтобы переместить sidebar media-запросами, он должен быть внутри content. :(

Пытался сделать desktop версию с sidebar внутри content, однако получалось следующее:

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