body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}

a {
  color: #00B7FF;
}

.languages {
  margin-top: 50px;
  list-style: none;
  padding-left: 0;
  -moz-column-count: 4;
  -webkit-column-count: 4;
  column-count: 4;
}

.color {
  display: inline-block;
  height: 25px;
  width: 25px;
  margin-right: 25px;
}
.color, .language {
  vertical-align: middle;
}

body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}

a {
  color: #00B7FF;
}

.languages {
  margin-top: 50px;
  list-style: none;
  padding-left: 0;
}

.color {
  display: inline-block;
  height: 25px;
  width: 25px;
  margin-right: 25px;
}
.color, .language {
  vertical-align: middle;
}

/* MEDIA QUERIES */

/* Small devices (tablets) */
@media (min-width: 768px) {
  .languages {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
  }
}

/* Medium devices (desktops) */
@media (min-width: 992px) {
  .languages {
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
  }
}

/* Large devices (large desktops) */
@media (min-width: 1200px) {
  .languages {
    -moz-column-count: 5;
    -webkit-column-count: 5;
    column-count: 5;
  }
}

Use media queries to change the column count based on screen size
Use media queries to change the column count based on screen size
