Change element order on smaller screens

https://stackoverflow.com/a/67151506/5818622

by coreuter

HTML

<div id="page">
    <div id="div-1">DIV 1</div>
    <div id="div-2">DIV 2</div>
    <div id="div-3">DIV 3</div>
    <div id="div-4">DIV 4</div>
    <div id="small-screen-spacer"> </div>
  </div>

CSS

#page {
  display: flex;
  flex-direction: column;
  align-items: center;
}

[id^="div-"] {
  border: 1px solid #ccc;
  margin-bottom: 10px;
  width: 50vw;
}

#div-1 {
  height: 50px;
  background: lightgreen;
}

#div-2 {
  height: 70px;
  background: lightyellow;
}

#div-3 {
  height: 150px;
  background: lightcoral;
}

#div-4 {
  height: 100px;
  background: lightblue;
}

@media (max-width: 500px) {
  #page {
    flex-wrap: wrap;
    height: 100vh; /* absolute height is also possible */
  }

  #small-screen-spacer {
    order: 3;
    align-self: stretch;
    flex: 1 0 100%;
    margin-right: 10px;
  }

  #div-1 {
    order: 1;
  }

  #div-2 {
    order: 4;
  }

  #div-3 {
    order: 5;
  }

  #div-4 {
    order: 2;
  }
}