CSS - Flex - Align Items with different heights just below each other in rows

Question

I'm trying to somehow understand how this layout on the Microsoft Azure homepage works: https://learn.microsoft.com/en-us/azure/app-service/

They have different elements each with their own height in rows which contain up to 3 elements next to each other. However they made it so that the next element below starts directly after the previous element. Typically what I got with using flexboxes was that all elements in each row start at the same height just below the the tallest element of the previous row.

I saw that they used the order attribute for the childs and they also don't use flex-direction: row but column for the wrapping container.

// Re-order items into 3 rows
    &.is-three-masonry-columns {
        .column:nth-child(3n + 1) {
            order: 1;
        }
        .column:nth-child(3n + 2) {
            order: 2;
        }
        .column:nth-child(3n) {
            order: 3;
        }
    }

However if I try to use flex-direction: column and the order attributes my items will just all stack below each other without rows. What's the issue with my code and what does the order attribute even do? I want to have rows with three items next to each other but the items in the next row should all start just below each item above.

.container {
  display: flex;
  flex-flow: column wrap;
  align-items: flex-start;
  align-content: space-between;
}

.item {
  flex-basis: calc(33.33%);
  border: 1px solid black;
  padding: 10px;
  box-sizing: border-box;
  align-self: flex-start;
}

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