How to take blocks out of a grid?

Question

I’m trying to do something similar to the facebook Timeline, two columns with multiple posts, the problem is, in some parts a hole opens, the reason is that the bottom block (on the left) is, in the code, after the above block (on the right).

What I want to know is: what to do to get that hole out and put a block together or ignore that position in the code and simply put it together.

HTML

<div class="wrapper">
    <article>
        <h3>Título</h3>
        <h6>Informações</h6>
        <p>Texto</p>
    </article>
    <article>
        <h3>Título</h3>
        <h6>Informações</h6>
        <p>Texto</p>
    </article>
    <article>
        <h3>Título</h3>
        <h6>Informações</h6>
        <p>Texto</p>
    </article>
</div>

CSS

.wrapper {
    width: 100%;
}
.wrapper article {
    float: left;
    width: 49%;
}

Answer 1

You can follow the solution below or if you prefer you can use the Masonry

Here is the CSS solution

CSS

.wrapper {
    width: 100%;
    max-width: 700px;
    margin: 2em auto;
    -moz-column-count:2;
    -moz-column-gap: 3%;
    -moz-column-width: 30%;
    -webkit-column-count:2;
    -webkit-column-gap: 3%;
    -webkit-column-width: 30%;
    column-count: 2;
    column-gap: 3%;
    column-width: 30%;
    height: 100%;
}

.wrapper article {
    margin-bottom: 20px;
    background:#e1e1e1;
    display: inline-block;
    width: 100%;
}

The result can be seen in this DEMO