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

Question

我希望通過媒體查詢更改div元素在[查看的文檔順序中]的位置。

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

當我更改我的視口時，我想div_1保持在div_2 。 基本上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>