Umordnen von Elementen - Responsive
von Marco Simbürger
Vor allem beim Programmieren einer Responsive Website möchte man bei einer schmaleren Bildschirmbreite Elemente umordnen. Ich zeige dies hier anhand eines Beispiels mit der Contao HTML-Struktur.
<div id="container">
<div id="left"></div>
<div id="main"></div>
</div>Auf der Desktop-Version passt diese Anordnung. Eine linke Spalte und rechts die Hauptspalte. Sobald der Bildschirm aber kleiner wird, möchte ich den Inhalt untereinander und die Hauptspalte oben haben. Aufgrund der HTML-Struktur kommt aber die linke Spalte zuerst. Um die Hauptspalte trotzdem oben anzeigen zu können, kann man folgenden CSS-Trick anwenden:
@media screen and (max-width: 768px) {
#container {
display: table;
}
#left {
float: none;
display: table-footer-group;
width: auto;
}
#main {
float: none;
display: table-header-group;
width: auto;
}
}Wir wandeln das ganze in table um und können die Anordnung so mit table-header-group bzw. table-footer-group ändern.
Die CSS-Eigenschaften float und with habe ich hier hinzugefügt, damit die Standard-Formatierungen von Contao überschrieben werden.
Kommentare
Einen Kommentar schreiben