我如何通过媒体查询更改html元素的顺序？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了我如何通过媒体查询更改html元素的顺序？相关的知识，希望对你有一定的参考价值。
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元素的当前顺序，以便将徽标位置固定在响应视图中。
答案
您可以让两个不同的html <div>呼叫一个台式机和一个移动电话，然后使用媒体查询根据屏幕尺寸显示或隐藏。 https://jsfiddle.net/DIRTY_SMITH/7a7m84ea/2/.mobile
display: none;
.mobile > h3 color: blue;
@media (max-width: 600px)
.mobile
display: inline;
.desktop
display: none;
另一答案
您可以尝试利用CSS表，因为它们具有强制执行特定顺序的预定义显示类型（在您的情况下为table-caption，该表位于table-cell之前）：
div display: table
header display: table-cell
nav display: table-caption
Here's a JSFiddle to demonstrate what I mean。
另一答案
@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>以上是关于我如何通过媒体查询更改html元素的顺序？的主要内容，如果未能解决你的问题，请参考以下文章