A Pen by betul.

index.html

    <div class="container">
      <div class="row" id="ms-container">
        <div class="col-sm-4 ms-item">
          Col1
          <p>
            Lorem ipsum dol,or sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </p>
        </div>

        <div class="col-sm-8 ms-item"> <!-- try style="width:65%" -->
          Col2
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </p>
        </div>

        <div class="col-sm-4 ms-item">
          Col3
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </p>
        </div>
      </div> <!-- end row -->
    </div> <!-- end container -->  

Masonry-and-Bootstrap:-Layout-col-sm-bug.markdown

Masonry and Bootstrap: Layout col-sm bug

While twitter bootstrap fits Col1 and Col2 next to each other on both viewports (<992 and >992 pixel), masonry doesn't for the smaller viewport.

A Pen by betul on CodePen.

License.

script.js

// masonry loaded from
// http://masonry.desandro.com/masonry.pkgd.min.js

// MASSONRY Without jquery
var container = document.querySelector('#ms-container');
var msnry = new Masonry( container, {
  itemSelector: '.ms-item',
  columnWidth: '.ms-item',            });   

// resize your browser window between 900 and 1100 pixel. 

style.css

/* 
  bootstrap loaded from:
  http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.css
*/


/*
  Remove padding, as it may break masonry layout.
  Similar issue here:
  https://github.com/desandro/masonry/issues/405
*/
.container {
  padding-left:0; padding-right:0
}