Dreispaltiges Layout mit Flexbox und zwei Media Queries

[Bimmelbeule]

Hallo!

Ich beschäftige mich gerade mit einem dreispaltigen Layout mit Flexbox…

Das CSS und die Testseite funktionieren einwandfrei. Bei 50em bricht sowohl die Navigation als auch die aside um. Soweit, sogut.

Ich möchte aber jetzt, noch ein zusätzliches Media Querie bei 65em einfügen, wo nur die aside zwischen dem Haupttext (main) und dem Footer rutscht, die Navigation aber erst mal auf der linken Seite bleibt, bis sie bei 50em ebenfalls umbricht (und dann zwischen aside und Footer steht). Ich blicke das nicht! Kann mir bitte freundlicherweise jemand vom Schlauch helfen?

Das CSS sieht so aus:

body {
  max-width: 80em;
  margin: 0 auto;}

.container {
  display: flex;
  flex-direction: column;
}

@media (min-width: 50em) {
  .container {
    flex-direction: row;
    flex: 1;
  }
  main {
    flex: 1;
  }
  nav {
    order: -1;
}
  nav, aside {
    flex: 0 0 5em;
  }
}

Die Testdatei ist hier: Testseite