style.css

.container {
  display: flex;
  width: 100vh;
}

.cubContainer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.cube {
  width: 200px;
  height: 200px;
  color: #ffffff;
  font-size: 6rem;
  text-align: center;
  flex: 0 0 200px;
  vertical-align: middle;
}

.menuContainer {
  width: 100vh;
}

input {
  width: 200px;
  background-color: #72c3dc;
  border: 1px solid #6f98a8;
  padding: 10px;
  margin-bottom: 10px;
}

@media only screen and (max-width: 375px) {
  /* For mobile phones: */

  .container {
    display: flex;
    width: 100vh;
    flex-direction: column;
  }

  .cubContainer {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    order: 1;
  }

  .menuContainer {
    width: 100vh;
    order: 0;
    padding: 20px;
  }

  .cube {
    width: 100vh;
    height: 200px;
    color: #ffffff;
    font-size: 6rem;
    text-align: center;
    flex: 0 0 200px;
    vertical-align: middle;
  }
}