如何使用媒体查询对HTML重新排序? [英] how can I reorder HTML using media queries?

问题描述

我想通过媒体查询[按查看的文档顺序]更改 div 元素的位置.

I want change a div element's position [in the viewed document order] by media query.

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

更改视口后，我想 div_1 留在 div_2 下.基本上是 div_1 在顶部.但是我想通过媒体查询来更改它.有可能吗?

When I change my viewport then I want to div_1 stay under the div_2. Basically div_1 on the top. But I want change it by Media query. Can it is possible??

推荐答案

使用 flexbox 及其 order 属性

我建议使用 .wrapper ，尽管您也可以在 body 上使用它并获得相同的结果

I recommend a .wrapper, though you can use it on the body as well and get the same result

@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

If flexbox isn't an option, you can use 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>

这篇关于如何使用媒体查询对HTML重新排序?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！