<div class="grid-container">
  <div style="order:1">1) Col 1 row 1<br>
    test<br>
    test<br>
    test</div>
  <div style="order:3">2) Col 1 row 2</div>
  <div style="order:5">3) Col 1 row 3<br>
    test<br>
    test</div>
  <div style="order:7">4) Col 1 row 4</div>
  <div style="order:9">5) Col 1 row 5<br>
    test<br>
    test</div>
  <div style="order:11">6) Col 1 row 6</div>
  <div style="order:2">7) Col 2 row 1<br>
    test</div>
  <div style="order:4">8) Col 2 row 2<br>
    test<br>
  </div>
  <div style="order:6">9) Col 2 row 3<br>
    test<br>
    <br>
    test<br>
    test</div>
  <div style="order:8">10) Col 2 row 4</div>
  <div style="order:10">11) Col 2 row 5<br>
    test<br>
    test <br>
    test<br>
    test</div>
  <div style="order:12">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;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.