GRID - Element bei < als 30em in zwei Spalten aufteilen

[einsiedler]

Folgendes möchte ich erreichen:

(Es geht mir hier um das hell-orange unterlegte GRID-Element)

Bei einem sehr schmalem Browserfenster , sagen wir bei < 30em, soll dieses Grid-Element (in der Höhe) zweispaltig werden und die Elemente darin untereinander angeordnet werden. Das möchte ich erreichen.

.main-content-wrapper {
	display: grid;
	grid: 	"main-head main-head" auto
			"navigations navigations" auto
			"main-content main-content" 1fr
			"main-footer main-footer" auto
		  / minmax(0, auto) [main-nav-start] minmax(0, 6rem) [main-nav-end];
	}


#navigations {
	grid-area: navigations;	
	grid-column-end: main-nav;
        background-color: rgba(255, 215, 0, 0.3);
}


#main-nav {
    grid-area: navigations / main-nav;
    min-width: 0;
}

Die dort enthaltenden Elmente, also einmal die "Hauptnavigation" als auch (zum zweiten) die "Interne Seiten Navigation" möchte ich dann untereinander angeordnet dargestellt haben (wohlgemerkt bei weniger als 30em!) und das in der Reihenfolge: "Hauptnavigation" darunter die "Interne Seiten Navigation".

Wäre das möglich wie ich mir das vorstelle?

Kann mir bitte jemand dabei helfen?

Der einsiedelnde