How to make child div wrap before its flexbox parent container wraps?

I am trying to have a the last div in the row wrap within itself before it gets wrapped to the next line.

<div class="flexcontainer"><div class="col1">this is text</div><div class="col2">this is text</div><div class="col3"><div class="contents m1">This is some other text</div><div class="contents m2">This is some other text</div><div class="contents m3">This is some other text</div></div></div>

.flexcontainer{  display:flex;  flex-direction:row;  flex-wrap:wrap;}.col3{  display:flex;  flex-direction:row;  flex-wrap:wrap;}.contents{  display:inline-block;}

Here's the code of what im working on.jsfiddle example

Here's the simplified code like I posted

I'm not exactly sure what I did before. I was able to create a 3 column flex container where the last child would wrap within itself before it's container wraps, but I can't seem to find the solution on how i did it previously.