Media Queries and CSS Grid?

I’m working on the Technical Documentation Page project, and I’m trying to implement media queries. When my page shrinks, I want the side navbar to jump to the top of the page instead.

In this instance, I’m trying to use media queries to re-organize the CSS Grid from being columns to rows (given the way I’ve coded it, that would seem to be the simplest way). I tried different ways of overwriting the grid-template-rows into columns and changing the position and display values, but nothing seems to be working. The example given does it a different way without the grid, but I’d like to try to troubleshoot what I have now.

My project: https://codepen.io/Lukedoc321/pen/poJRqdB

Thanks!
Luke