How Can I Reorder Html Using Media Queries?

I want change a div element's position [in the viewed document order] by media query. When I change my viewport then I want to div_1 stay under the div_2. Basically div_1 on the t

Solution 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;
  }
  .wrapperdiv:first-child {
    order: 1;
  }
}

<divclass="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%; 
  }
  .wrapperdiv:nth-child(1) {
    display: table-footer-group; 
  }
}

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