Wenn ich die Anweisungen umdrehe, also die kleinen Displays oben und die großen darunter notiere, tritt der Fehler nicht auf aber dann funktioniert die ganze Sache gar nicht mehr.
Das ist kein Fehler, sondern das korrekte (logische) Verhalten.
Die Media Queries funktionieren so:
Der Inhalt der jeweiligen Media-Query Regel gilt immer dann, wenn die Bedingung erfüllt ist. CSS bleibt aber trotzdem hierarchisch. Das heißt, Regeln die weiter unten stehen, überschreiben die vorher gesetzten Werte.
Wenn du sie so schreibst, wie in deinem Beispiel, gilt immer die untere. Denn die ist ja ebenfalls erfüllt.
Das heißt, du musst sie umdrehen. Erst die kleinste Bildschirm-Breite, dann die jeweils größere.
Was meinst du mit "die Seite funktioniert dann gar nicht mehr"?
Alternativ kannst du für jede Media Query auch min und max Werte angeben. Dann wäre die Reihenfolge quasi egal, weil immer nur genau eine erfüllt sein kann.