demo.css

.box-group {
  width: calc(100% + 1.5rem);
  box-sizing: border-box;
  margin-left: -1.5rem;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

.box {
  box-sizing: border-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}

.box .box-content,
.box .box-header,
.box .box-footer {
  display: block;
}

.box .box-content {
  -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}

.box .box-header,
.box .box-footer {
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}

.box-group-4-up .box {
  width: 25%;
}

.box-group-4-up .box:nth-child(n) {
  padding: 1.5rem 0 0 1.5rem;
}

.box-group-4-up .box:nth-child(-n+4) {
  padding-top: 0;
}

@media screen and (max-width: 1024px) {
  .box-group-4-up .box {
    width: 50%;
  }
  .box-group-4-up .box:nth-child(n) {
    padding: 1.5rem 0 0 1.5rem;
  }
  .box-group-4-up .box:nth-child(-n+2) {
    padding-top: 0;
  }
}

@media screen and (max-width: 600px) {
  .box-group-4-up .box {
    width: 100%;
  }
  .box-group-4-up .box:nth-child(n) {
    padding: 1.5rem 0 0 0px;
  }
  .box-group-4-up .box:nth-child(-n+1) {
    padding-top: 0;
  }
}

@media screen and (max-width: 600px) {
  .box-group-4-up {
    width: 100%;
    margin: 0;
  }
}

.box-group-3-up .box {
  width: 33.33333%;
}

.box-group-3-up .box:nth-child(n) {
  padding: 1.5rem 0 0 1.5rem;
}

.box-group-3-up .box:nth-child(-n+3) {
  padding-top: 0;
}

@media screen and (max-width: 600px) {
  .box-group-3-up .box {
    width: 100%;
  }
  .box-group-3-up .box:nth-child(n) {
    padding: 1.5rem 0 0 0px;
  }
  .box-group-3-up .box:nth-child(-n+1) {
    padding-top: 0;
  }
}

@media screen and (max-width: 600px) {
  .box-group-3-up {
    width: 100%;
    margin: 0;
  }
}

.box-group-2-up .box {
  width: 50%;
}

.box-group-2-up .box:nth-child(n) {
  padding: 1.5rem 0 0 1.5rem;
}

.box-group-2-up .box:nth-child(-n+2) {
  padding-top: 0;
}

@media screen and (max-width: 600px) {
  .box-group-2-up .box {
    width: 100%;
  }
  .box-group-2-up .box:nth-child(n) {
    padding: 1.5rem 0 0 0px;
  }
  .box-group-2-up .box:nth-child(-n+1) {
    padding-top: 0;
  }
}

@media screen and (max-width: 600px) {
  .box-group-2-up {
    width: 100%;
    margin: 0;
  }
}

.box-group-1-up .box {
  width: 100%;
}

.box-group-1-up .box:nth-child(n) {
  padding: 1.5rem 0 0 0px;
}

.box-group-1-up .box:nth-child(-n+1) {
  padding-top: 0;
}

.box-light .box-content,
.box-light .box-header,
.box-light .box-footer, .box-dark .box-content,
.box-dark .box-header,
.box-dark .box-footer, .box-blue .box-content,
.box-blue .box-header,
.box-blue .box-footer {
  border-style: solid;
  border-left-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 0px;
  border-top-width: 0px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.box-light .box-header, .box-dark .box-header, .box-blue .box-header {
  border-bottom-width: 0px;
  border-top-width: 1px;
  padding-top: 1.5rem;
}

.box-light .box-footer, .box-dark .box-footer, .box-blue .box-footer {
  border-top-width: 0px;
  border-bottom-width: 1px;
  padding-bottom: 1.5rem;
}

.box .box-no-footer .box-content {
  border-bottom: 1px solid;
  padding-bottom: 1.5rem;
}

.box-light .box-content,
.box-light .box-header,
.box-light .box-footer {
  border-color: #bdc3c7;
  background-color: #ecf0f1;
  color: #2c3e50;
}

.box-dark .box-content,
.box-dark .box-header,
.box-dark .box-footer {
  border-color: #2c3e50;
  background-color: #34495e;
  color: #ecf0f1;
}

.box-no-footer .box-content {
  border-bottom-width: 1px;
  padding-bottom: 1.5rem;
}

.box-no-header .box-content {
  border-top-width: 1px;
  padding-top: 1.5rem;
}

.box-link {
  background: #ecf0f1;
  border: 1px solid #bdc3c7;
  color: #2c3e50;
  transition: all 150ms linear;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  text-decoration: none;
}

.box-link h1, .box-link h2, .box-link h3, .box-link h4, .box-link h5, .box-link h6 {
  color: #3498db;
  text-decoration: underline;
}

.box-link:hover {
  background: #3498db;
  border: 1px solid #3498db;
  color: #ecf0f1;
  text-decoration: none;
}

.box-link:hover h1, .box-link:hover h2, .box-link:hover h3, .box-link:hover h4, .box-link:hover h5, .box-link:hover h6, .box-link:hover p {
  color: #ecf0f1;
}

.box-center .box-content,
.box-center .box-header,
.box-center .box-footer {
  text-align: center;
}

html.ie9 .box, html.lt-ie9 .box {
  width: 100%;
}

html.ie9 .box:nth-child(n), html.lt-ie9 .box:nth-child(n) {
  padding: 1.5rem 0 0 0px;
}

html.ie9 .box:nth-child(-n+1), html.lt-ie9 .box:nth-child(-n+1) {
  padding-top: 0;
}