如何僅使用 CSS 交換兩個 DIV 的順序？

使用純 CSS 交換 DIV 位置

在響應式設計中，動態排列元素至關重要。如果您尋求一種純粹透過CSS 交換兩個div 位置的方法，這裡有一個受類似查詢啟發的解決方案：

原始結構：

<div>

預期的結果：

讓“second_div”出現在“first_div”，而不會改變 HTML。

解決方案：

實現以下媒體查詢以定位必要的上下文：

@media (max-width: 30em) {
  .container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .container .first_div {
    order: 2;
  }

  .container .second_div {
    order: 1;
  }
}

說明：

• 媒體查詢目標設備最大寬度為30em，有效地實現響應式行為。
• 在容器元素內，我們將顯示設定為“flex”，它支援水平排列元素。
• 我們指定flex-direction 作為「column」以垂直對齊 div。
• align-items: flex-start;確保元素從容器的開頭開始。
• 交換 div 位置的關鍵是透過 'order' 屬性。透過設定順序：2；在 .first_div 上，我們指示瀏覽器將其顯示在具有更高順序的任何其他元素之後。反之，順序：1； .second_div 將其置於 .first_div 之前。

這種方法允許僅使用 CSS 無縫交換 DIV 位置，從而有效地解決初始查詢。

以上是如何僅使用 CSS 交換兩個 DIV 的順序？的詳細內容。更多資訊請關注PHP中文網其他相關文章！