This is an example of my code
Display on Desktop
<body>
<div>
<header>
<div>example</div>
<a><img src"my logo is here"/></a>
<div>example</div>
<nav>classic-menu</nav>
</header>
</div>
</body>
Display on Mobile
<body>
<div>
<nav>menu responsive</nav>-------> when the menu go in drop down all header content follow the menu
<header>
<div>example</div>
<a><img src"my logo is here"/></a>----->wrong logo position when you open the menu responsive
<div>example</div>
</header>
</div>
</body>
我想知道是否可以通过媒体查询更改 HTML 元素的当前顺序，以便在响应式 View 中修复 Logo 位置。
最佳答案
@media only screen and (max-width: 600px) {
#flex { display: flex; flex-direction: column; }
#a { order: 2; }
#b { order: 1; }
#c { order: 3; }
}You Can try this:
<div id="container">
<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>
</div>详情:点击here
关于html - 如何使用媒体查询更改 html 元素的顺序？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32891128/