如何使用媒体查询更改 html 元素的顺序？答案

【问题标题】：How can I change the order of html elements with media queries?如何使用媒体查询更改 html 元素的顺序？
【发布时间】：2020-06-09 13:30:38
【问题描述】：

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 元素的当前顺序，从而在响应式视图中固定徽标位置。

【问题讨论】：

您不能使用 CSS 修改 DOM。如果视觉顺序是水平的（即从左到右，反之亦然），您可以更改视觉顺序，但不能更改垂直顺序。有朝一日使用现代 CSS 布局功能可以实现这一点，但目前还不行。
如果您的浏览器支持，您可以使用 flexbox 重新排序元素。但是，您将无法像上面那样让 DOM 从mobile 切换到desktop。您正在将nav 移出header 并将其置于上一层。以获得想要的效果。您可能希望将nav 绝对定位在移动视口上。
@feeela 你们想多了！超级简单，我只是回答OP的问题lol。
添加 - 在移动视图中定位绝对“导航”
正如@LaljiTadhani 建议的那样，使用CSS 将元素移出其父元素的唯一方法是在元素上设置position: absolute，并在必要时将position: static 设置为父元素。兄弟姐妹可以使用 flexbox 和 order 移动，但不能从它们的容器中移出。

标签： html css responsive-design media-queries

【解决方案1】：

@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

【讨论】：

【解决方案2】：

您可以让两个不同的 html <div>s 调用一个桌面和一个移动设备，然后使用媒体查询根据屏幕大小显示或隐藏。 https://jsfiddle.net/DIRTY_SMITH/7a7m84ea/2/

.mobile {
    display: none;
}
.mobile > h3 {color: blue;}
@media (max-width: 600px) {
    .mobile {
        display: inline;
    }
    .desktop {
        display: none;
    }
}

【讨论】：

这不是真正的解决方案。这可能对 SEO 不利，因为可能有很多重复的内容。我也不想在 HTML 模板中两次呈现包含数百个项目的菜单。在许多客户项目中，主菜单是迄今为止网站中最冗长的 HTML 部分。如果你为这些元素中的任何一个设置了任何 JS 事件处理程序，你需要定义它们两次。例如，hahn-kolb.de 的标头重量为 34.5 KB（首页 HTML 重量为 170 KB，内容页面约为 60-80 KB 的 HTML）
@feeela OP 要求重新订购他的图像以使其正确放置，无需对整个页面执行此操作，而只是图像的父级。再一次你想多了。停止！它让你看起来很傻！
我想我们对这个问题的解释不同。但是header>div+a+div+nav 是与nav+header>div+a+div 完全不同的HTML 结构。在我看来，问题不仅仅在于定位徽标，因为这可以单独使用 CSS 完成。

【解决方案3】：

您可以尝试使用 CSS 表格，因为它们具有强制执行特定顺序的预定义显示类型（在您的情况下：table-caption，它位于 table-cell em>):

div { display: table }
header { display: table-cell }
nav { display: table-caption }

Here's a JSFiddle to demonstrate what I mean.

【讨论】：