如何使用 CSS 根據螢幕尺寸更改 Div 的順序？

根據裝置寬度使用CSS 變更Div 順序

建立響應式網站時，在管理元素順序時通常會遇到以下挑戰：螢幕尺寸改變。雖然對於兩個或三個 div 存在簡單的解決方案，但隨著元素數量的增加，排序變得更加複雜。

為了解決這個問題，CSS 的 Flexbox 規格使用 order 和 flex-flow 屬性提供了一個強大的解決方案。這些屬性允許對元素進行靈活排序，同時保持其內聯塊顯示。

以下解決方案滿足問題中提到的要求：

• 元素最初顯示為一行。
• 當螢幕寬度低於定義的斷點時，它們會轉換為列佈局。
• 元素的順序在列佈局中進行修改以建立所需的排列。

HTML 結構：

<div class="container">
    <div class="one">I'm first</div>
    <div class="two">I'm second</div>
    <div class="three">I'm third</div>
    <div class="four">I'm fourth</div>
    <div class="five">I'm fifth</div>
</div>

CSS 樣式：

.container div {
    width: 100px;
    height: 50px;
    display: inline-block;
}

.one { background: red; }
.two { background: orange; }
.three { background: yellow; }
.four { background: green; }
.five { background: blue; }

@media screen and (max-width: 531px) {
    .container {
        display: flex;
        flex-flow: column;
    }
    .five { order: 1; }
    .four { order: 2; }
    .three { order: 3; }
    .two { order: 4; }
    .one { order: 5 }
}

確保解決方案當螢幕寬度變得太窄時，div會根據指定的順序，同時保持其內聯塊佈局並保留其內容和尺寸。

以上是如何使用 CSS 根據螢幕尺寸更改 Div 的順序？的詳細內容。更多資訊請關注PHP中文網其他相關文章！