how can I reorder HTML using media queries? [duplicate]

Question

I want change a div element's position [in the viewed document order] by media query.

<div>1</div>
<div>2</div>

When I change my viewport then I want to div_1 stay under the div_2. Basically div_1 on the top. But I want change it by Media query. Can it is possible??

Answer 1

Use flexbox and its order property

I recommend a .wrapper, though you can use it on the body as well and get the same result

@media screen and (max-width: 800px) {
  .wrapper {
    display: flex;
    flex-direction: column;
  }
  .wrapper div:first-child {
    order: 1;
  }
}

<div class="wrapper">
  <div>1</div>
  <div>2</div>
</div>

If flexbox isn't an option, you can use display: table

@media screen and (max-width: 800px) {
  .wrapper {
    display: table; 
    width: 100%; 
  }
  .wrapper div:nth-child(1) {
    display: table-footer-group; 
  }
}

<div class="wrapper">
  <div>1</div>
  <div>2</div>  
</div>