如何僅使用 CSS 和媒體查詢對 HTML 區塊元素重新排序？

使用CSS 重新排序區塊元素

您的目標是僅使用CSS 重新排列HTML 區塊元素的順序，同時保留“推送“推送”效果顯示的：塊屬性。

行動裝置的CSS 媒體查詢最佳化

為了迎合行動用戶，您可以利用CSS 媒體查詢根據螢幕尺寸修改區塊的順序：

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

範例實作

為了進行演示，請考慮以下示例：

<div>
<p>透過添加將以下CSS 規則添加到媒體查詢中，您可以切換移動螢幕的區塊順序：</p> <pre class="brush:php;toolbar:false">@media only screen and (max-device-width: 480px) {
   #blockC {
      order: 1;
   }

   #blockA {
      order: 2;
   }

   #blockB {
      order: 3;
   }
}

使用Flexbox進行順序操作

為了更通用解決方案，您可以利用Flexbox 屬性：

<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;}
}

此方法可讓您變更透過修改媒體查詢中的order 屬性來更改元素。 flex-flow: column 屬性確保元素在較小的螢幕上垂直堆疊。