html { min-height: 100%; }

*, *::before, *::after { box-sizing: border-box; }

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

#container {
  display: flex;
  flex-flow: column;
  min-height: 100vh;
  width: 100%; 
}

#header, main, #footer, #f-4 {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch; 
}

#header { flex: 0 1 auto; }
main { flex: 1 1 auto; }
#footer { flex: 0 1 auto; }

@media (max-width: 40em) {
  #container { width: 100%; }
  #h-1, #h-2, #h-3, #f-1, #f-2, #f-3, #f-4, #f-4-1, #f-4-2 { width: 100%; }
  #h-2 a{ width: 100%; } 
  #h-1 { order: 1; }
  #h-2 { order: 3; }
  #h-3 { order: 2; }
}
@media (min-width: 40em) and (max-width: 60em) {
  #h-1, #h-3, #f-1, #f-2, #f-3, #f-4 { width: 50%; }
  #h-2, #f-4-1, #f-4-2 { width: 100%; }
  #h-1 { order: 1; }
  #h-2 { order: 3; }
  #h-3 { order: 2; }
}
@media (min-width: 60em) and (max-width: 80em) {
  #h-1, #h-3, #f-4-1, #f-4-2 { width: 50%; }
  #f-1, #f-2, #f-3 { width: 33.33%; }
  #h-2, #f-4 { width: 100%; }
  #h-1 { order: 1; }
  #h-2 { order: 3; } 
  #h-3 { order: 2; }
}
@media (min-width: 80em) {
  #h-1, #h-3, #f-1, #f-2, #f-3, #f-4 { width: 25%; }
  #f-4-1, #f-4-2 { width: 100%; } 
  #h-2 { width: 50%; }
}