Masonry and Bootstrap 3 - 3 columns of different s

Question

I've been fighting with Bootstrap and Masonry for over 3-4 hours now and searched tons of articles but couldn't find the solution.

Here's the thing:

I have Bootstrap Grid that looks like this:

<div class="itemsContainer">
    <div class="col-md-6 item"></div>
    <div class="col-md-3 item"></div>
    <div class="col-md-3 item"></div>
</div>

In total there are 12 columns and without Masonry it works just perfect. But as soon as I include Masonry, the third column drops down.

If I make it 6-6 columns or 4-4-4 columns and 3-3-3-3 they work fine, but 6-3-3 doesn't work.

Does anyone have a solution for it? Any ideas how to have this cool layout? Do I have to implement my fluid grid? Why does Masonry break with Bootstrap?

This is a JS fiddle to illustrate https://jsfiddle.net/bePolite/52VtD/11921/embedded/result/

Answer 1

bootstrap Grid Example

<div class="container">
    <h1>Divs with same col's</h1>
    <div class="row">
        <div class="col-xs-4 bg1"><p class="lead"> i'm div col-xs-4 </p></div>
        <div class="col-xs-4 bg2"><p class="lead"> i'm div col-xs-4 </p></div>
        <div class="col-xs-4 bg3"><p class="lead"> i'm div col-xs-4 </p></div>
    </div>
    <h1>Divs with differents col's</h1>
    <div class="row">
        <div class="col-xs-6 bg1"><p class="lead"> i'm div col-xs-6 </p></div>
        <div class="col-xs-3 bg2"><p class="lead"> i'm div col-xs-3 </p></div>
        <div class="col-xs-3 bg3"><p class="lead"> i'm div col-xs-3 </p></div>
    </div>
</div>

this will show you like this:

Answer 2

need to include an <div class="row"> will work, like you want...

<div class="row">
    <div class="itemsContainer">
        <div class="col-md-6 item"></div>
        <div class="col-md-3 item"></div>
        <div class="col-md-3 item"></div>
    </div>
</div>