<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <h1>Pure Css Responsive Masonry Gallery</h1> <div class="col-md-12"> <div class="row"> <hr> <div class="gal"> <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> <img src="https://preview.ibb.co/mWpE3Q/2.jpg" alt=""> <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> <img src="https://preview.ibb.co/mysOxk/3.jpg" alt=""> <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> <img src="https://preview.ibb.co/mWpE3Q/2.jpg" alt=""> <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> <img src="https://preview.ibb.co/mysOxk/3.jpg" alt=""> <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""><img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> <img src="https://preview.ibb.co/mysOxk/3.jpg" alt=""> <img src="https://preview.ibb.co/mysOxk/3.jpg" alt=""> <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> <img src="https://preview.ibb.co/mWpE3Q/2.jpg" alt=""> </div> </div> </div> </div>

.gal { -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; /* Firefox */ column-count: 3; } .gal img{ width: 100%; padding: 7px 0;} @media (max-width: 500px) { .gal { -webkit-column-count: 1; /* Chrome, Safari, Opera */ -moz-column-count: 1; /* Firefox */ column-count: 1; } }