Masonry flexbox with order going horizontal instead of vertical with different heights

Question

I am currently using the following code to make a pure CSS masonry grid

.flex-container {
  display: flex;
  flex-flow: column wrap;
  height: 29em;
}

.flex-item {
  display: flex;
  font-size: 30px;
  min-height: 200px;  /* Would use just `height` but Firefox is weird */
  flex: 0 0 auto;
  width: 33.333%;
}

This is working fine, however, I am manually inputting data from the backend and I am trying to get my content to go like this:

[1][2][3]
[4][5][6]
[7][8][9]

Instead, it ends up like this:

[1][4][7]
[2][5][8]
[3][6][9]

How can I achieve the horizontally counted layout? I also have a CodePen showing my problem The heights are unknown

.flex-container {
  display: flex;
  flex-flow: column wrap;
  height: 29em;
}

.flex-item {
  display: flex;
  font-size: 30px;
  min-height: 200px;  /* Would use just `height` but Firefox is weird */
  flex: 0 0 auto;
  width: 33.333%;
}

.flex-item:nth-child(1) {
  min-height: 250px;
}

.flex-item:nth-child(2) {
  min-height: 350px;
}

.flex-item:nth-child(3) {
}

.flex-item:nth-child(4) {
  min-height: 300px;
}

.flex-item:nth-child(5) {
  min-height: 250px;
}

.flex-item:nth-child(6) {
}

.flex-item:nth-child(7) {
  min-height: 250px;
}

.flex-item:nth-child(8) {
}

.flex-item:nth-child(9) {
  min-height: 400px;
}


/* cosmetic styles */

body {
  font: 600 30px monospace;
}

.flex-item {
  background: #95a5a6;
  border-radius: 10px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;  /* to account for padding */
  color: #fff;
  padding: 15px;
}

.flex-item:nth-child(6n + 1) {
  background: #2ecc71;
}
.flex-item:nth-child(6n + 2) {
  background: #3498db;
}
.flex-item:nth-child(6n + 3) {
  background: #9b59b6;
}
.flex-item:nth-child(6n + 4) {
  background: #f1c40f;
}
.flex-item:nth-child(6n + 5) {
  background: #e67e22;
}
.flex-item:nth-child(6n) {
  background: #e74c3c;
}

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
  <div class="flex-item">6</div>
  <div class="flex-item">7</div>
  <div class="flex-item">8</div>
  <div class="flex-item">9</div>
</div>

Answer 1

.flex-container {
  display: flex;
  flex-flow: column wrap;
  height: 29em;
}

.flex-item {
  display: flex;
  font-size: 30px;
  min-height: 200px;  /* Would use just `height` but Firefox is weird */
  flex: 0 0 auto;
  width: 33.333%;
}

.flex-item:nth-child(1) {
  min-height: 250px;
 order: 1;
}

.flex-item:nth-child(2) {
  min-height: 350px;
 order: 4;
}

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

.flex-item:nth-child(4) {
  min-height: 300px;
 order: 2;
}

.flex-item:nth-child(5) {
  min-height: 250px;
 order: 5;
}

.flex-item:nth-child(6) {
 order: 8;
}

.flex-item:nth-child(7) {
  min-height: 250px;
 order: 3;
}

.flex-item:nth-child(8) {
 order: 6;
}

.flex-item:nth-child(9) {
  min-height: 400px;
 order: 9;
}


/* cosmetic styles */

body {
  font: 600 30px monospace;
}

.flex-item {
  background: #95a5a6;
  border-radius: 10px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;  /* to account for padding */
  color: #fff;
  padding: 15px;
}

.flex-item:nth-child(6n + 1) {
  background: #2ecc71;
}
.flex-item:nth-child(6n + 2) {
  background: #3498db;
}
.flex-item:nth-child(6n + 3) {
  background: #9b59b6;
}
.flex-item:nth-child(6n + 4) {
  background: #f1c40f;
}
.flex-item:nth-child(6n + 5) {
  background: #e67e22;
}
.flex-item:nth-child(6n) {
  background: #e74c3c;
}

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
  <div class="flex-item">6</div>
  <div class="flex-item">7</div>
  <div class="flex-item">8</div>
  <div class="flex-item">9</div>
</div>

How about using order property?