.container {
  display: flex;
	background-color: lightblue;
  border: 2px solid black;
  height: 20vh;
  margin-bottom: 5px;
}
.box {
	width: 15vh;
  height: 15vh;
  background-color: blue;
  color: white;
  border: 1px solid black;
  margin: 5px;
  padding: 0.5em;
}

.wrap-reverse{
	flex-wrap: wrap-reverse;
}
.wrap {
	flex-wrap: wrap;
}

#row {
	/*
  	flex-direction: row;
  	flex-wrap: wrap;
  */
  /* flex-flow combines flex-direction and flex-wrap into a single property */
  flex-flow: row wrap;
}
#row-reverse {
	flex-direction: row-reverse;  
}
#column {
	flex-direction: column;
}
#column-reverse {
	flex-direction: column-reverse;
}

/*
	outside the media query => mobile styling
	these styles should affect how the page looks on a mobile device
*/
#mobile {
	color: blue;
  text-decoration: overline;
  font-family: cursive;
  text-align: right;
}
/* 
	inside the media query => default styling
	the media query should define how the page always looks
*/
@media screen and (min-width: 400px) {
  #mobile {
  	color: red;
    text-decoration: underline;
    font-family: sans-serif;
    text-align: center;
  }
}