Wie kann ich Blockelemente in CSS neu anordnen und gleichzeitig ihren Stapeleffekt beibehalten?

Blockelemente mithilfe von CSS neu anordnen

Bei der Webentwicklung kann es notwendig werden, die Reihenfolge von Elementen innerhalb einer Webseite neu anzuordnen. Dies kann mit CSS erreicht werden, ohne auf umständliche Methoden wie position: absolute zurückgreifen zu müssen. Die Beibehaltung der Funktionalität von display:block-Eigenschaften muss jedoch berücksichtigt werden.

Problemstellung:

Betrachten Sie HTML-Code mit drei Blockelementen (Block A, Block B und Block C) vertikal angeordnet. Das Ziel besteht darin, die Reihenfolge dieser Blöcke nur mithilfe von CSS zu vertauschen und gleichzeitig den Abwärtsschubeffekt von display:block beizubehalten.

Code-Snippet:

<div>
<p><strong>Lösung mit CSS:</strong></p>
<p>CSS-Medienabfragen bieten die Möglichkeit, das Elementverhalten basierend auf der Bildschirmgröße zu ändern. In diesem Fall können wir die order-Eigenschaft verwenden, um die Elemente neu anzuordnen:</p>
<pre class="brush:php;toolbar:false">@media only screen and (max-device-width: 480px) {
  #blockC {
    order: 1;
  }
  #blockA {
    order: 2;
  }
  #blockB {
    order: 3;
  }
}

Durch das Festlegen von Order-Werten manipulieren wir die Anzeigereihenfolge von Elementen, ohne ihre Position im Quellcode zu ändern. Je niedriger der Bestellwert, desto früher erscheint das Element.

Beispiel:

  
    <title>Block Reordering</title>
    <style>
      @media only screen and (max-width: 480px) {
        #parent {
          display: flex;
          flex-flow: column;
        }
        #a {
          order: 2;
        }
        #c {
          order: 1;
        }
        #b {
          order: 3;
        }
      }
    </style>
  
  
    <div><p>In diesem Beispiel, wenn die Breite des Browserfensters kleiner oder gleich ist 480px ändert sich die Reihenfolge der Blöcke zu: Block C, Block A, Block B. Dadurch bleibt der Display: Block-Push-Effekt für verschiedene Bildschirmgrößen erhalten.</p></div>