html - A responsive two-column layout using flexbox -

i have 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 positioned in 1 column. i'd expect such layout

___________ | h2 |    | |____| h1 | |_h3_|____| 

i know layout wrap if set max-width. don't know div size in advance. intent wrap in such way both columns have equal height.

how can achieve it?

by giving h1 section 100% height, forced 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