Mit CSS Reihenfolge von Elementen ändern
Eine Webseite soll auf allen Geräten optimal dargestellt werden. Daher ist es manchmal nötig, dass div-Elemente auf dem Desktop in einer anderen Reihenfolge angeordnet sein müssen als auf dem Tablet oder Smartphone.
In diesem Beispiel werden in der Produktübersicht bei der Desktop-Darstellung die drei verschiedenen Produkte nebeneinander angezeigt. Zu jedem Produkt können durch Anklicken des Button unterhalb weitere Informationen geöffnet werden und eine bereits geöffnete Produktinfo eines anderen Artikels wird automatisch geschlossen.
Desktop-Variante
Die drei Produkte werden nebeneinander angeordnet und die Produkt-Info für jedes Produkt unterhalb. Es wird immer nur eine Produkt-Info angezeigt, die anderen sind unsichtbar (display:none):
Smartphone-Variante
Auf einem Smartphone sollen die Produktinfos direkt unter dem zugehörigen Produkt eingeblendet werden und nicht erst nach dem letzten:
richtig
falsch
Tablet-Variante
Responsives und flexibles Layout
Damit auf Desktop, Tablet und Smartphone die Produkte mit Produktinfo immer richtig angezeigt werden, verwende ich display: flex; und das order-Attribut.
CSS-Code:
#produkt1 { order: 1; padding: 40px 0; background: lightblue; color:#fff; } #produkt1_info { order: 4; background: blue; color:#fff; } #produkt2 { order: 2; padding: 40px 0; background: lightyellow; } #produkt2_info { order: 5; background: yellow; } #produkt3 { order: 3; padding: 40px 0; background: pink; color:#fff; } #produkt3_info { order: 6; background: magenta; color:#fff; } @media (min-width: 768px) { .produkt_info { display: -webkit-flex; display: -ms-flexbox; // Internet Explorer 10 display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; flex-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; } #produkt1 { order: 1; } #produkt1_info { order: 3; } #produkt2 { order: 2; } #produkt2_info { order: 4; } #produkt3 { order: 5; } #produkt3_info { order: 6; } } @media (min-width: 992px) { .produkt_info { display: -webkit-flex; display: -ms-flexbox; // Internet Explorer 10 display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } #produkt1 { order: 1; } #produkt1_info { order: 4; } #produkt2 { order: 2; } #produkt2_info { order: 5; } #produkt3 { order: 3; } #produkt3_info { order: 6; } }
HTML-Code (unter Verwendung von bootstrap):
<div class=“row produkt_info“>
<div id=“produkt1″ class=“col-xs-12 col-sm-6 col-md-4″><h3>Produkt 1</h3></div>
<div id=“produkt1_info“ class=“col-xs-12″>
<h3>Produkt 1 – Info</h3>
<p>Lorem ipsum dolor sit amet, consetetur …</p>
</div><div id=“produkt2″ class=“col-xs-12 col-sm-6 col-md-4″><h3>Produkt 2</h3></div>
<div id=“produkt2_info“ class=“col-xs-12″>
<h3>Produkt 2 – Info</h3>
<p>Lorem ipsum dolor sit amet, consetetur …</p>
</div><div id=“produkt3″ class=“col-xs-12 col-sm-6 col-md-4″><h3>Produkt 3</h3></div>
<div id=“produkt3_info“ class=“col-xs-12″>
<h3>Produkt 3 – Info</h3>
<p>Lorem ipsum dolor sit amet, consetetur …</p>
</div></div>
HTML- und CSS-Code für ein responsives und flexibles Layout als Download:
Beiträge zu Gambio
Kleine Code-Schnipsel, interessante Links und Gambio-Module zu Cross-Selling, Versandkosten, Adventskalender u.v.m.
Beiträge zu WordPress
Individuelle Plugin-Anpassungen, Tricks und Tipps rund um WordPress und individuelle Plugin-Lösungen: