<div class="toggle-stuff">
    <h2 class="display-1">Bootstrap 4 Flex Box Grid Demo</h2>
    <h4>Notice how the heights are always equal with Flex Box.</h4>
     <a href="#" class="is-3 btn btn-lg btn-danger" data-url="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" style="display: none;">Use BS3 Grid Instead (floats based)</a>
     <a href="#" class="is-4 btn btn-lg btn-success" data-url="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">Use BS4 Grid Instead (flex box based)</a>
</div>

<div class="container">
    <div class="row">
        <div class="col-xs-2">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum voluptatem quo quibusdam eos quod maiores, quae ea. Enim accusantium, rem asperiores perspiciatis, nemo saepe sequi, dolorum eaque officia ipsam cupiditate.
        </div>
        <div class="col-xs-2">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        </div>
        <div class="col-xs-2">
            Lorem ipsum dolor sit amet, consectetur
        </div>
        <div class="col-xs-2">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum voluptatem quo quibusdam eos quod maiores, quae ea. Enim accusantium, rem asperiores perspiciatis, nemo saepe sequi, dolorum eaque officia ipsam cupiditate.
        </div>

      <div class="col-xs-2">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum voluptatem quo quibusdam eos quod maiores, quae ea. Enim accusantium, rem asperiores perspiciatis, nemo saepe sequi, dolorum eaque officia ipsam cupiditate.
        </div>
        <div class="col-xs-2">
            Lorem ipsum dolor sit amet, consectetur
        </div>
    </div>
    <div class="row">
        <div class="col-xs-2">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum voluptatem quo quibusdam eos quod maiores, quae ea. Enim accusantium, rem asperiores perspiciatis, nemo saepe sequi, dolorum eaque officia ipsam cupiditate.
        </div>
        <div class="col-xs-2">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum voluptatem quo quibusdam eos quod maiores, quae ea. Enim accusantium, rem asperiores perspiciatis, nemo saepe sequi, dolorum eaque officia ipsam cupiditate.
        </div>
        <div class="col-xs-2">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum voluptatem quo quibusdam eos quod maiores
        </div>
        <div class="col-xs-2">
            Lorem
        </div>
    </div>
</div>

html {
  font-size: 16px;
}
[class^="col"] {
    background: rgba(255, 69, 69, 0.73);
    border: 1px solid rgba(255, 69, 69, 0.8);
}
.toggle-stuff {
  text-align: center;
  margin: 30px 0;
}
h2 {
    margin: 30px 0 15px;
  font-size: 20px !important;
}
h4 {
  margin-bottom: 20px;
    font-size: 15px !important;
  opacity: 0.5;
}

$('.toggle-stuff a').click(function() {
  $this = $(this);
  
  if ($('.col-xs-2').length) {
    $('.is-4').hide();
    $('.is-3').show();
    $('.col-xs-2').removeClass('col-xs-2').addClass('col-2')
  } else {
    $('.is-3').hide();
    $('.is-4').show();
     $('.col-2').removeClass('col-2').addClass('col-xs-2')
  }
  
  // Ghetto, whatever
  $('link').each(function() {
      
    if ($(this).attr('rel') == 'stylesheet prefetch') {
      $(this).attr('href', $this.data('url'));      
    }
    
  });
  
    return false;
});