<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 1 row 5<br>
    test<br>
    test</div>
  <div>6) Col 1 row 6 <br>test</div>
  <div>7) Col 2 row 1<br>
    test</div>
  <div>8) Col 2 row 2<br>
    test<br>
  </div>
  <div>9) Col 2 row 3<br>
    test<br>
    <br>
    test<br>
    test</div>
  <div>10) Col 2 row 4</div>
  <div>11) Col 2 row 5<br>
    test<br>
    test <br>
    test<br>
    test</div>
  <div>12) Col 2 row 6</div>
</div>

.grid-container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(
    auto-fill,
    minmax(120px, 50%) minmax(120px, 50%)
  );
  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;

  for (i = 0; i < Math.round(num / 2); ++i) {
    descendents[i].style.order = j;
    descendents[i + Math.round(num / 2)].style.order = j + 1;
    j = j + 2;
  }
})(document);