A responsive two-column layout using flexbox - html

Question

I have a small layout of sections
.collection {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.collection section {
width: 50%;
}
<div class="collection">
<section>
<h2>bar</h2>
</section>
<section>
<h3>baz</h3>
</section>
<section>
<h1>FOO</h1>
</section>
</div>
Then everything is positioned in one column. I'd expect such a layout
___________
| h2 | |
|____| h1 |
|_h3_|____|
I know that the layout would wrap if I set max-width. But I don't know the div size in advance. My intent is to wrap in such a way that both columns have equal height.
How can I achieve it?

Answer 1

By giving the h1 section a 100% height, it will be forced into a new column.
* {
margin: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
.collection {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 100%;
}
.collection section {
width: 50%;
flex: 1;
border: 1px dashed black;
}
.collection section:last-child {
flex-basis: 100%;
}
#media ( max-width: 700px ) {
.collection section { width: 100%; }
.collection section:last-child { flex-basis: auto; }
}
<div class="collection">
<section><h2>bar</h2></section>
<section><h3>baz</h3></section>
<section><h1>FOO</h1></section>
</div>
jsFiddle