How can I change the order of html elements with media queries?

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>

I want know if with media queries I can change the current order of HTML elements, so as to fix the logo position in responsive view.

You cannot modify the DOM using CSS. You may change the visual ordering if it is horizontal (i.e. from left to right or vice versa) but not the vertical order. This will be possible some day using modern CSS layout features, but not yet. — feeela, Oct 01 '15 at 15:27
You can reorder elements using flexbox if your browser supports it. However, you won't be able to get the DOM to switch from `mobile` to `desktop` like you have above. You are moving the `nav` out of the `header` and putting it a level above. To get the desired effect. You may wish to absolutely position the `nav` on mobile viewports. — Jhey, Oct 01 '15 at 15:44
@feeela You guys are over thinking this! Super simple, I just answer the OP's question lol. — Adam Buchanan Smith, Oct 01 '15 at 16:09
As @LaljiTadhani suggests, the only way to move an element out of its parent with CSS would be to set `position: absolute` on the element and `position: static` to the parent if necessary. Siblings can be moved around with flexbox and `order`, but cannot be moved out of their containers. — Nils Kaspersson, Oct 06 '15 at 08:20

score 4 · Answer 1 · answered Jun 09 '20 at 05:30

@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>

For details: Click here

score 0 · Answer 2 · answered Oct 01 '15 at 16:06

0

You can make two different html <div>s call one desktop and one mobile, then use media queries to show or hide based off screen size. https://jsfiddle.net/DIRTY_SMITH/7a7m84ea/2/

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

answered Oct 01 '15 at 16:06

Adam Buchanan Smith

9,422
5
19
39

1

That is not really a solution. It is probably bad for SEO as there could be a lot of duplicated content. I also don't want to render a menu with hundreds of items two times in the HTML templates. In many customer projects, the main-menu is by far the most verbose HTML part of a website. And if you have set any JS event handlers to any of those elements, you need to define them twice. At https://hahn-kolb.de/ for example the header alone weights 34.5 KB (with homepage HTML weighing 170KB, a content page about 60-80 KB of HTML) – feeela Oct 01 '15 at 16:13
@feeela OP asked to re-order for his image to sit right, No need to do it to the whole page, but just the parent to the image. Once again you are over thinking it. Stop! It makes you look silly! – Adam Buchanan Smith Oct 01 '15 at 16:21
1

I guess we are interpreting the question differently. But `header>div+a+div+nav` is a totally different HTML structure from `nav+header>div+a+div`. It seems to me, that the question is not only about positioning a logo, as this could have been done with CSS alone. – feeela Oct 01 '15 at 16:23

score 0 · Answer 3 · answered Oct 06 '15 at 08:16

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.

How can I change the order of html elements with media queries?

3 Answers3