如何在保持 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>