Cacher is the code snippet organizer for pro developers

.container {
  display: flex; /*elements in a row*/
  flex-wrap: wrap; /*sizes of elements are fixed and they can be not in one row*/
  flex-flow: row;
  flex-flow: column;
}


justify-content - axes
align-items - cross axes

justify-content: center;
justify-content: start;
justify-content: end;
justify-content: flex-start;
justify-content: flex-end;
justify-content: left;
justify-content: right;

justify-content: baseline;
justify-content: first baseline;
justify-content: last baseline;

justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;
justify-content: stretch;

@media screen and (min-width: 700px) {
  header { width: 100%; order: 1;}
  /*flex-grow describes amount of columns out of 12*/
  .blue { (width: 20%;) flex-grow: 1; order: 4; } 
  .orange { (width: 60%;) flex-grow: 3; order: 2; }
  .green { (width: 20%;) flex-grow: 1; order: 3; }
  footer { width: 100%; order: 5;}
}

@media screen and (min-width: 700px) {
  header { width: 100%; order: 1;}
  /*flex-shrink describes in which proportion elements get smaller when brpwser gets smaller*/
  .blue { (width: 20%;) flex-shrink: 1; order: 4; } 
  .orange { (width: 60%;) flex-shrink: 3; order: 2; }
  .green { (width: 20%;) flex-shrink: 1; order: 3; }
  footer { width: 100%; order: 5;}
}

flex-basis: ...px; - starting size of elements which saved proportionally
  when flex-grow or flex-shrink are used

<div class="container">
  <header class="box red"><header>
  <div class="box blue"></div>
  <div class="box orange"></div>
  <div class="box green"></div>
  <footer class="box black"><footer>
</div>