<div class="grid-container">
  <div>1) Col 1 row 1<br>
    test<br>
    test<br>
    test</div>
  <div>2) Col 1 row 2</div>
  <div>3) Col 1 row 3<br>
    test<br>
    test</div>
  <div>4) Col 1 row 4</div>
  <div>5) Col 2 row 1<br>
    test<br>
    test</div>
  <div>6) Col 2 row 2 <br>test</div>
  <div>7) Col 2 row 3<br>
    test</div>
  <div>8) Col 2 row 4<br>
    test<br>
  </div>
  <div>9) Col 3 row 1<br>
    test<br>
    <br>
    test<br>
    test</div>
  <div>10) Col 3 row 2</div>
  <div>11) Col 3 row 3<br>
    test<br>
    test <br>
    test<br>
    test</div>
  <div>12) Col 3 row 4</div>
</div>

.grid-container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(
    auto-fill,
    minmax(120px, 33.3%) minmax(120px, 33.3%) minmax(120px, 33.3%)
  );
  background-color: #2196f3;
  padding: 10px;
}
.grid-container > div {
  text-align: center;
  font-size: 30px;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px;
}

(function (d) {
  "use strict";
  var descendents = d.querySelectorAll(".grid-container > div"),
    num = descendents.length,
    i,
    j = 1,
    loop;

  loop = Math.round(num / 3);

  for (i = 0; i < loop; ++i) {
    descendents[i].style.order = j;
    descendents[i + loop].style.order = j + 1;
    descendents[i + loop * 2].style.order = j + 2;
    j = j + 3;
  }
})(document);