pinterest with bootstrap CSS float not working

Question

I am having some CSS issues with bootstrap and having my divs in a pin style

I am using this code to make it work

#columns {
    -webkit-column-count: 3;
    -webkit-column-gap: 0px;
    -webkit-column-fill: auto;
    -moz-column-count: 3;
    -moz-column-gap: 0px;
    -moz-column-fill: auto;
    column-count: 3;
    column-gap: 0px;
    column-fill: auto;
}

.pin {
    display: inline-block;
    width:100% !important;
    background: #FEFEFE;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
}

my html is

<div class="row top-buffer" id="columns">

<?php
$blog = Syscore::load_blog();

foreach($blog as $post)
{
?>
  <div class="col-lg-4 col-md-4 col-sm-4 pin">
    <div class="thumbnail">
    <?php
    if(!empty($post['main_image']))
    {
        echo '<img src="'.$post['main_image'].'" alt="'.$post['title'].'" style="width:300px !important;">';
    }
    else{
        echo '<img data-src="holder.js/300x150" alt="...">';
    }
    ?>    
      <div class="caption">
        <h3><?=$post['title'];?></h3>
        <p>
        <?php
          $content = html_entity_decode($post['content']);
          preg_match('/^([^.!?]*[\.!?]+){0,3}/', strip_tags($content), $abstract);
          echo self::limit_words($abstract[0],15)
        ?>...</p>
        <p><a href="//<?=SITEURL;?>/<?=$post['url'];?>" class="btn btn-default" role="button">Read More</a></p>
      </div>
    </div>
  </div>
<?php
}
?>


</div>

and you will be able to see what it is doing which is not lining up the top columns - http://www.russellharrower.com

any suggestions please.