如何使用媒體查詢重新排序HTML？

Question

我想要通過媒體查詢更改div元素的位置[以查看的文檔順序]。

<div>1</div> 
 
<div>2</div>

當我改變我的視口，然後我想下div_2div_1住宿。頂部基本爲div_1。但我想通過媒體查詢進行更改。可以嗎？

Answer 1

使用flexbox及其order財產

我推薦一個.wrapper，雖然你可以在body使用它以及和得到同樣的結果

@media screen and (max-width: 800px) { 
 
    .wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
    } 
 
    .wrapper div:first-child { 
 
    order: 1; 
 
    } 
 
}

<div class="wrapper"> 
 
    <div>1</div> 
 
    <div>2</div> 
 
</div>

如果flexbox不是一個選項，你可以使用display: table

@media screen and (max-width: 800px) { 
 
    .wrapper { 
 
    display: table; 
 
    width: 100%; 
 
    } 
 
    .wrapper div:nth-child(1) { 
 
    display: table-footer-group; 
 
    } 
 
}

<div class="wrapper"> 
 
    <div>1</div> 
 
    <div>2</div> 
 
</div>