如何在保持 CSS 的堆疊效果的同時對 CSS 中的區塊元素重新排序？

使用 CSS 重新排序區塊元素

在 Web 開發中，可能需要重新排列網頁中元素的順序。這可以使用 CSS 來實現，而無需求助於諸如position:absolute之類的繁瑣方法。但是，維護 display: block 屬性的功能需要考慮。

問題陳述：

考慮具有三個區塊元素（區塊 A、區塊 B 和區塊）的 HTML 程式碼C) 垂直排列。目標是僅使用 CSS 交換這些區塊的順序，同時保留 display: block 的向下推送效果。

程式碼片段：

<div>
<p><strong>使用CSS 的解決方案：</strong></p>
<p>CSS 媒體查詢提供了根據螢幕尺寸媒體查詢提供了根據螢幕尺寸媒體查詢提供了根據螢幕尺寸媒體查詢修改元素行為的能力。在這種情況下，我們可以使用 order 屬性來重新排列元素：</p>
<pre class="brush:php;toolbar:false">@media only screen and (max-device-width: 480px) {
  #blockC {
    order: 1;
  }
  #blockA {
    order: 2;
  }
  #blockB {
    order: 3;
  }
}

透過設定 order 值，我們可以操縱元素的顯示順序，而無需更改它們在原始程式碼中的位置。 order值越小，元素出現的越早。

範例：

  
    <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>在此範例中，當瀏覽器視窗寬度小於或等於480px，區塊的順序變為：區塊C，區塊A，塊B。這保留了顯示：各種螢幕尺寸的塊推送效果。 </p></div>