How to start a new column in flex column wrap layout

Question

I want my data to be arranged in columns (top to bottom, left to right) and every heading inside the data should start a new column. There are three constraints:

<

Answer 1

If you can dynamically add a div before each head (except the first), it may be possible. Credits go to Tobias Bjerrome Ahlin. Tested on Chrome, Firefox, Safari and IE11.

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 200px;
}

.item {
  background-color: #A2CBFA;
  border: 1px solid #4390E1;
  margin: 2px;
}

.break {
  flex-basis: 100%;
}

  
item 1
  
item 2
  

  
item 3
  
item 4
  
item 5
  

  
item 6
  

  
item 7
  
item 8