Bootstrap grid system - make column change row depending on size

Question

I am trying to get a grid system with behaviour similar to what is on this page: http://weibergmedia.com/demos/yk

You can see that the grid completely rearranges depending on the window size; retaining the column sizes until they are essentially col-xs-12, when the windows size is extra small.

Any pointers to get me working in the right direction would be greatly appreciated. All I can think of doing at the moment is writing a convoluted javascript to replicate the behaviour.

Answer 1

You can achieve this using Isotope. Using it together with the Bootstrap grid system would look like this:

var elem = document.querySelector('.grid');
var iso = new Isotope( elem, {
  // options
  itemSelector: '.grid-item',
  percentPosition: true
});

.box {
  background-color: tomato;
  width: 100%;
  height: 100%;
}

.grid-item {
  height: 255px;
  margin-bottom: 30px;
}

<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container">
  <div class="row grid">
    <div class="grid-item col-sm-3">
      <div class="box">Box 1</div>
    </div>
    <div class="grid-item col-sm-3 col-lg-6">
      <div class="box">Box 2</div>
    </div>
    <div class="grid-item col-sm-3">
      <div class="box">Box 3</div>
    </div>
    <div class="grid-item col-sm-3 col-md-6">
      <div class="box">Box 4</div>
    </div>
    <div class="grid-item col-sm-3">
      <div class="box">Box 5</div>
    </div>
    <div class="grid-item col-sm-3">
      <div class="box">Box 6</div>
    </div>
  </div>
</div>