<html lang="de">
<style>
/* FOUR EQUAL COLUMNS */

* { box-sizing: border-box; }

/* Erstellen Sie vier gleiche Spalten, die nebeneinander schweben */
.column {
  float: left;
  width: 25%;
  padding: 20px;

 hyphens: auto;
}

/* Löschen Sie Floats nach den Spalten */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsives Layout – erstellt ein zweispaltiges Layout statt vier Spalten */
@media screen and (max-width: 600px) {
  .column  {
    width: 50%;
  }
}

/* Responsives Layout – die beiden Spalten werden übereinander statt nebeneinander gestapelt */
@media screen and (max-width: 600px) {
  .column  {
    width: 100%;
  }
}


</style>