What CSS properties should I set so that the columns will wrap underneath one another, ignoring the height of horizontally-adjacent columns?

[![Desired layout for wrapping to fit 2 columns across.](https://i.stack.imgur.com/Qew5W.png)](https://i.stack.imgur.com/Qew5W.png)

Unsuccessful attempt
--------------------

I'm attempting to do this with `display: grid`, but it doesn't behave how I want. An example:

```css
header {
    height: 2.0rem;
    background: PeachPuff;
}
footer {
    height: 2.0rem;
    background: PaleGreen;
}

header,
footer,
section.app-column {
    padding: 1.0rem;
}

section#main section#app-column-primary {
    grid-area: primary;
    height: 5.0rem;
    background: Cyan;
}
section#main section#app-column-secondary {
    grid-area: secondary;
    height: 15.0rem;
    background: Thistle;
}
section#main section#app-column-tertiary {
    grid-area: tertiary;
    height: 10.0rem;
    background: Coral;
}

section#main {
    display: grid;
    grid-template-columns: repeat(3, 10.0rem);
    grid-row-gap: 0.2rem;
    grid-column-gap: 0.5rem;
}

section#main {
    content: "This application requires a display at least 200 pixels wide.";
}

@media(min-width: 200px) {
    section#main {
        grid-template-areas:
            "primary"
            "secondary"
            "tertiary";
    }
}

@media(min-width: 350px) {
    section#main {
        grid-template-areas:
            "primary secondary"
            "tertiary .";
    }
}

@media(min-width: 520px) {
    section#main {
        grid-template-areas:
            "primary secondary tertiary";
    }
}
```

```html
<header>Header ipsum, dolor sit amet.</header>
<section id="main">
    <section class="app-column" id="app-column-primary">
        Primary app column
    </section>
    <section class="app-column" id="app-column-secondary">
        Secondary app column
    </section>
    <section class="app-column" id="app-column-tertiary">
        Tertiary app column
    </section>
</section>
<footer>Footer ipsum, dolor sit amet.</footer>
```

Correct result for 3 columns and 1 column
-----------------------------------------

That does what I need for the three-column (`"primary secondary tertiary"`) and one-column (`"primary" "secondary" "tertiary"`) layouts.

[![Correct layout for 3 columns across.](https://i.stack.imgur.com/uc0GX.png)](https://i.stack.imgur.com/uc0GX.png) [![Correct layout for 1 column across.](https://i.stack.imgur.com/jpZJN.png)](https://i.stack.imgur.com/jpZJN.png)

Unwanted layout for 2 columns
-----------------------------

But the two-column layout has the `tertiary` column starting below the `secondary` column:

[![Incorrect layout for 2 columns across.](https://i.stack.imgur.com/KwJ1N.png)](https://i.stack.imgur.com/KwJ1N.png)

Desired layout for 2 columns
----------------------------

What I want is for the `tertiary` column placement to ignore the `secondary` column because they won't overlap at all:

[![Desired layout for wrapping to fit 2 columns across.](https://i.stack.imgur.com/Qew5W.png)](https://i.stack.imgur.com/Qew5W.png)

How can I do this with CSS? Is `display: grid` appropriate for this? Should I be using `display: flex` or something different (if so, exactly what CSS properties do I need)?