Multi to single column grid?

Question

I have a grid and I wish to place items in two columns like so:

card | side
card
card
etc..

But at certain screen sizes, I wish to slot in the side element into the cards like this:

card
card
side
card
card
etc..

I've tried this for the first layout:

.grid {
    display: grid;
    grid-template-areas:
            "card side"
            "card side"
            "card side";
    grid-template-columns: 2.2fr 1fr;
}

.card {
    grid-area: card;
}

.side {
    grid-area: side;
}

This works, but when I want the single column I use:

 .grid {
    grid-template-areas:
            "card"
            "card"
            "side"
            "card"
            "card";
}

But the above does not work - the browser won't recognize it.