CSS flex fill blank

Question

I have the following HTML and CSS, on a page I would like to look like a blog page so using flex I would like it to look something like https://calpoint.com/techpipe/2016/06/02/free-divi-blog-extension-gives-the-divi-blog-module-a-brand-new-look/

article {
  width: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-flow: wrap;
  -webkit-align-content: flex-end;
  align-content: flex-end;
}

article div {
  flex-grow: 1;
  width: 32%;
  padding: 0;
  background-color: whitesmoke;
  float: left;
  margin-bottom: 1%;
  margin-left: 1%;
  overflow: auto;
  border-radius: 25px;
  padding-bottom: 1%;
  text-align: center;
}

<article>
  <div>
    <h1>1</h1>
    <p>Proin finibus augue auctor ipsum varius tempus. Nam mollis odio ac mauris pulvinar, sed porta lorem auctor. Sed elit odio, aliquam vitae sollicitudin quis, imperdiet eget nisl. Proin mattis elementum orci, nec consequat augue luctus vel.</p>
  </div>
  <div>
    <h1>2</h1>
    <p>Proin finibus augue auctor ipsum varius tempus. Nam mollis odio ac mauris pulvinar, sed porta lorem auctor.</p>
  </div>
  <div>
    <h1>3</h1>
    <p>Proin finibus augue auctor ipsum varius tempus. Nam mollis odio ac mauris pulvinar, sed porta lorem auctor. Sed elit odio, aliquam vitae sollicitudin quis, imperdiet eget nisl. Proin mattis elementum orci, nec consequat augue luctus vel.</p>
  </div>
  <div>
    <h1>4</h1>
    <p>Proin finibus augue auctor ipsum varius tempus. Nam mollis odio ac mauris pulvinar, sed porta lorem auctor. Sed elit odio, aliquam vitae sollicitudin quis, imperdiet eget nisl. Proin mattis elementum orci, nec consequat augue luctus vel.</p>
  </div>
  <div>
    <h1>5</h1>
    <p>Proin finibus augue auctor ipsum varius tempus. Nam mollis odio ac mauris pulvinar, sed porta lorem auctor. Sed elit odio, aliquam vitae sollicitudin quis, imperdiet eget nisl. Proin mattis elementum orci, nec consequat augue luctus vel.</p>
  </div>
  <div>
    <h1>6</h1>
    <p>Proin finibus augue auctor ipsum varius tempus. Nam mollis odio ac mauris pulvinar, sed porta lorem auctor. Sed elit odio, aliquam vitae sollicitudin quis, imperdiet eget nisl. Proin mattis elementum orci, nec consequat augue luctus vel.</p>
  </div>

</article>

My question is how do I line boxes 1,2.3 so they all start at the same height on the page, then move 5 box up to fill the space in the top row?

Hope this makes sense.

Thanks

Peter