Wie kann ich HTML-Blockelemente nur mithilfe von CSS- und Medienabfragen neu anordnen?

Blockelemente mit CSS neu anordnen

Ihr Ziel ist es, die Reihenfolge von HTML-Blockelementen nur mithilfe von CSS neu zu ordnen und dabei den „Push“-Effekt beizubehalten der Anzeige: Blockeigenschaft.

CSS Media Query for Mobile Optimierung

Um mobilen Benutzern gerecht zu werden, können Sie eine CSS-Medienabfrage verwenden, um die Reihenfolge der Blöcke basierend auf der Bildschirmgröße zu ändern:

@media only screen and (max-device-width: 480px) {
   #blockC {
      /* Add CSS rules to change the order here */
   }
}

Beispielimplementierung

Betrachten Sie zur Veranschaulichung das folgende Beispiel:

<div>
<p>Durch Hinzufügen der folgenden CSS-Regeln zu Mit der Medienabfrage können Sie die Reihenfolge der Blöcke für mobile Bildschirme ändern:</p>
<pre class="brush:php;toolbar:false">@media only screen and (max-device-width: 480px) {
   #blockC {
      order: 1;
   }

   #blockA {
      order: 2;
   }

   #blockB {
      order: 3;
   }
}

Reihenfolgemanipulation mit Flexbox

Für eine vielseitigere Lösung können Sie verwenden Flexbox-Eigenschaften:

<div>
<pre class="brush:php;toolbar:false">@media screen and (max-width:300px) {
   #parent{
      display:flex;
      flex-flow: column;
   }

   #a{order:2;}
   #c{order:1;}
   #b{order:3;}
}

Mit diesem Ansatz können Sie die Reihenfolge der Elemente ändern, indem Sie die Reihenfolgeeigenschaft innerhalb der Medienabfrage ändern. Die Eigenschaft „flex-flow: Column“ sorgt dafür, dass die Elemente auf kleineren Bildschirmen vertikal gestapelt werden.