JSFiddle - React, Tailwind, and code Playground

by Ayyappan Sakthivadivel

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

  <!-- More info -->
<!-- http://www.nextbootstrap.com/2016/01/masonry-layout-for-bootstrap-3.html -->
<!-- https://gist.github.com/premregmi/b8162eebe67e467b147c -->

  <div class="container">
    
      <div class="col-sm-12">
        <div class="masonry masonry-columns-4">
          <div class="masonry-item one">
            <div class="media">
              <img src="http://placehold.it/350x150" class="img-responsive center-block" alt="">
            </div>
            <h2 class="post-title">1Getting Bootstrap Tabs to Play Nice with Masonry</h2>
            <h6 class="post-info">October-8 2015 : Posted by Admin</h6>
            <p>This is my template for using Masonry 3 with Bootusing Masonry 3 with Bootstrap, Desandrusing Masonry 3 with Bootstrap, Desandrusing Masonry 3 with Bootstrap, Desandrusing Masonry 3 with Bootstrap, Desandrstrap, Desandro Masonry & Twitter Bootstrap 3. How to use responsive twitter bootstrap & masonry together</p>
            <a href="" title="" class="read-more">Read More</a>
            <div class="tag-comment">
              <span class="pull-left"><i class="fa fa-tags"></i> technology, web</span>
              <span class="pull-right"><i class="fa fa-comments"></i> no comments</span>
            </div>
          </div>
          <div class="masonry-item two">
            <div class="media">
              <img src="http://placehold.it/450x150" class="img-responsive center-block" alt="">
            </div>
            <h2 class="post-title">2Bootstrap Masonry</h2>
            <h6 class="post-info">October-8 2015 : Posted by Admin</h6>
            <p>Masonry CSS with Bootstrap, Build a Dynamic Grid with...

CSS

/*====================================
=            masonry Page            =
====================================*/

.masonry{
display: block;
-webkit-column-gap: 2.25rem;
-moz-column-gap: 2.25rem;
column-gap: 12.25rem;
display: flex;
}

/* 5 columns */
.masonry.masonry-columns-5{
-webkit-column-count: 5;
-moz-column-count: 5;
column-count: 5;
}
@media(max-width: 1170px){
  .masonry.masonry-columns-5{
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
}


/*-4 columns------*/
.masonry.masonry-columns-4{
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}

/*-3 columns------*/
.masonry.masonry-columns-3{
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}

/*-2 columns------*/
.masonry.masonry-columns-2{
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}

/*-1 columns------*/
.masonry.masonry-columns-1{
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}


/*--------Responsive---------*/
@media(max-width: 991px){
  .masonry.masonry-columns-4, 
  .masonry.masonry-columns-5{
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
}

@media(max-width: 767px){
  .masonry.masonry-columns-4, 
  .masonry.masonry-columns-5,
  .masonry.masonry-columns-3{
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
}

@media(max-width: 540px){
  .masonry.masonry-columns-4, 
  .masonry.masonry-columns-5,
  .masonry.masonry-columns-3,
  .masonry.masonry-columns-2{
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
}

.masonry .masonry-item{
    display: inline-block !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative;
    display: block;
    padding: 3px;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    border-radius: .25rem;
float: none !important;
margin-right: 0 !important;
margin-bottom: 0 !important;
margin-bottom: 2.25rem !important;
}

.masonry .masonry-item {
    display: inline-block;
    margin-bottom: 20px;
...