Reihenfolge von div-Elementen verändern

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:

  HTML- und CSS-Code als Download