Hallo,
ich möchte einmal meine Vorhaben näher erklären. Ich möchte einen Footer für eine Webseite bauen der sich automatisch umsortiert. Weil das sprachlich recht schwierig zu beschreiben ist, was ich meine, versuche ich es mal mit einem Beispiel. Also ich habe 4 Spalten im Vollbild also bei entsprechender Display Größe soll der Footer also auch komplett sichtbar sein. Ist die Displaygröße jedoch etwas kleiner beispielsweise bei mobilen Geräten, dann würde ich diese Spalten gerne zu Zeilen (untereinander) umsortieren (Ähnlich wie hier (im Footer): https://www.w3schools.com/html/). Das ist jetzt aber noch nicht alles, da ich dies gerne in eine Wordpress Seite einbauen möchte 
Bisher habe ich auch schon Code zusammen bekommen, ich bin mir aber nicht sicher, ob das auch wirklich alles so richtig ist. Ich bin also auf der Suche nach einer Verbesserung, oder einer Alternative.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#columns {
float: left;
width: 25%;
padding: 10px;
height: 300px;
box-sizing: border-box;
}
#rowq:after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width: 600px) {
#columns {
width: 100%;
}
}
</style>
</head>
<body>
<h2>Column Layout</h2>
<div id="rowq">
<div id="columns" style="background-color:#aaa;">
<h2>Column 1</h2>
<p>text..</p>
</div>
<div id="columns" style="background-color:#bbb;">
<h2>Column 2</h2>
<p>text..</p>
</div>
<div id="columns" style="background-color:#ccc;">
<h2>Column 3</h2>
<p>text..</p>
</div>
<div id="columns" style="background-color:#ddd;">
<h2>Column 4</h2>
<p>text..</p>
</div>
</div>
</body>
</html>