Mit CSS Block bei großem Bildschirm neben, bei kleinem unter Haupttext positionieren

[rstuby]

Hallo ihr Lieben! Auf die Gefahr hin, dass hier keiner mehr mitliest...
Ich habe auf meiner Seite das Menü als Linkliste konfiguriert und zwar so, dass es bei großen Bildschirmen rechts und links vom Haupttext steht und bei kleinen oben.
Jetzt möchte ich noch ein paar Zusatzlinks angeben, die am Desktop auch an der Seite stehen sollen (ob rechts oder links. wäre zweitrangig), bei schmalen Bildschirmen (Handy) aber unten.
Die einzige Lösung, die ich zustande gebracht habe, ist mit posiion:absolute, was mir nicht so gut gefällt, weil das Bild je nach Zeilenumbruch sehr unterschiedlich wird. Gibt es eine bessere Möglichkeit?
Auch Antworten wie "das würde ich überhaupt alles ganz anders machen" sind willkommen, aber bitte im Rahmen von HTML und CSS.

Hier das Minimalbeispiel:
HTML

<nav>
<ul class="navi">
<li><span>Hauptmenü</span></li>
</ul>
<ul class="navi2" aria-label="Menüfortsetzung">
<li><span>Nebenmenü</span></li>
</ul>
</nav>
<main>
<div class="Inhalt">
Großes Textfeld mit Haupttext
</div>
<aside>
<ul class="secmenu">
<li><span>Zusatzlinks</span></li>
</ul>
</aside>
</main>

CSS

.Inhalt {
background-color: yellow;
min-height: 20em;
margin: 0 15%
}

ul.navi,
ul.navi2,
ul.secmenu {
background-color: green; margin:0; padding:0;
}

ul.navi li,
ul.navi2 li,
ul.secmenu li {
list-style: none
}

@media (min-width:55rem) {

ul.navi,
ul.navi2 {
margin-top: 1rem;
width: 15%;
}

ul.navi {
float: left;
}

ul.navi2 {
float: right;
}

ul.secmenu {
position: absolute;
right: 0;
top: 16rem;
width: 10%;
}
}

@media (max-width: 55rem) {

ul.navi,
ul.navi2 {
float: none;
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
margin-top: .5rem;
}


ul.secmenu {
clear: both;
max-width: 25em;
flex: auto;
margin: 0;
}

}


https://jsfiddle.net/2x1cd5zy/

[rstuby]

Lösung gefunden! Für schmale Bildschirme lasse ich es wie es ist, für breite baue ich dieses Rasterschema von selfhtml.org nach: https://wiki.selfhtml.org/extensions/Selfhtml/frickl.php/Beispiel:CSS-grid-layout-fix-footer.html#view_result. Damit kann man Elemente unabhängig von ihrer Reihenfolge im HTML-Code platzieren, aber viel flexibler als mit position:absolute.