How Can I Reorder Block Elements in CSS While Maintaining Their Stacking Effect?

Reordering Block Elements Using CSS

In web development, it may become necessary to rearrange the order of elements within a webpage. This can be achieved using CSS, without resorting to cumbersome methods like position: absolute. However, maintaining the functionality of display: block properties needs consideration.

Problem Statement:

Consider HTML code with three block elements (Block A, Block B, and Block C) arranged vertically. The goal is to swap the order of these blocks using CSS only, while preserving the downward push effect of display: block.

Code snippet:

<div>
<p><strong>Solution Using CSS:</strong></p>
<p>CSS media queries provide the ability to modify element behavior based on screen size. In this case, we can employ the order property to rearrange the elements:</p>
<pre class="brush:php;toolbar:false">@media only screen and (max-device-width: 480px) {
  #blockC {
    order: 1;
  }
  #blockA {
    order: 2;
  }
  #blockB {
    order: 3;
  }
}

By setting order values, we manipulate the display order of elements without altering their position in the source code. The lower the order value, the earlier the element appears.

Example:

  
    <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 this example, when the browser window width is less than or equal to 480px, the order of the blocks changes to: Block C, Block A, Block B. This preserves the display: block push effect for various screen sizes.</p></div>