.container {

  display: flex;

  flex-flow: column wrap;

  align-content: space-between;

  /* Your container needs a fixed height, and it 

   * needs to be taller than your tallest column. */

  height: 665px;

  /* Optional */

  background-color: #f7f7f7;

  border-radius: 3px;

  padding: 20px;

  width: 60%;

  margin: 40px auto;

  counter-reset: items;

}

​

.item {

  width: 32%;

  /* Optional */

  position: relative;

  margin-bottom: 2%;

  border-radius: 3px;

  background-color: #a1cbfa;

  border: 1px solid #4290e2;

  box-shadow: 0 2px 2px rgba(0,90,250,0.05),

    0 4px 4px rgba(0,90,250,0.05),

    0 8px 8px rgba(0,90,250,0.05),

    0 16px 16px rgba(0,90,250,0.05);

  color: #fff;

  padding: 15px;

  box-sizing: border-box;

}

​

.item::before {

  counter-increment: items;

  content: counter(items);

}

​

/* Re-order items into 3 rows */

.item:nth-child(3n+1) { order: 1; }

.item:nth-child(3n+2) { order: 2; }

.item:nth-child(3n)   { order: 3; }

​

/* Force new columns */

.container::before,

.container::after {

  content: "";

  flex-basis: 100%;

  width: 0;

  order: 2;

}

​

body { font-family: sans-serif; }

h3 { text-align: center; }