Place div's of different heights in a responsive parent div
Introducing... CSS Flexbox (Tada)!

The markup.

&lt;div id="topics-wrapper"&gt;
    &lt;div class="topic-1"&gt;&lt;?php include('topics/t1.php'); ?&gt;&lt;/div&gt;
    &lt;div class="topic-2"&gt;&lt;?php include('topics/t2.php'); ?&gt;&lt;/div&gt;
    &lt;div class="topic-3"&gt;&lt;?php include('topics/t3.php'); ?&gt;&lt;/div&gt;
    &lt;div class="flex-ghost"&gt;&lt;/div&gt;
    &lt;div class="topic-4"&gt;&lt;?php include('topics/t4.php'); ?&gt;&lt;/div&gt;
&lt;/div&gt;


We'll set #topics-wrapper to be our flexbox container. Put space between children when necessary, and allow wrapping.

#topics-wrapper {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}


Hide the ghost element for now, it'll come in handy later.

.flex-ghost { display: none; }


Normally, we want children to be 32% in width.

#topics-wrapper &gt; div {
    flex-basis: 32%;
}


On medium screens, switch to 49%.

@media (...) {
    #topics-wrapper &gt; div {
        flex-basis: 48%;
    }
}


Go all out on small screens.

@media (...) {
    #topics-wrapper &gt; div {
        flex-basis: 100%;
    }
}


Now, we want column 4 on the left on medium screens, so in your medium media query, allow the ghost to fill the space it would take.

.flex-ghost { display: block; }


You'll never completely be able to imitate Masonry, but hopefully I've given you a good start. Especially experiment with flex-direction and flex-wrap. Learn Flexbox, it'll change the way you write CSS forever!