Search code examples
htmlcssmedia-queries

how can I reorder HTML using media queries?

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

Solution

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