Question

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元素的当前顺序，以便在响应式视图中修复徽标位置。

Answer 1

您可以将两个不同的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;
    }
}

Answer 2

You could try utilizing CSS tables, as they have pre-defined display types that enforce a certain order (in your case: table-caption, which comes before table-cell):

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

Here's a JSFiddle to demonstrate what I mean.

Answer 3

@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元素的顺序？

3 个答案: