JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">

  <div class="col-md-6 col-sm-12 inner">
    <div class="panel panel-default">
      <!-- Default panel contents -->
      <div class="panel-heading">Panel heading</div>
      <div class="panel-body">
        <p>1 - Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
      </div>
    </div>
  </div>


  <div class="col-md-6 col-sm-12 inner">
    <div class="panel panel-default">
      <!-- Default panel contents -->
      <div class="panel-heading">Panel heading</div>
      <div class="panel-body">
        <p>2 -Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lore</p>
      </div>
    </div>
  </div>
  <div class="col-md-6 col-sm-12 inner">
    <div class="panel panel-default">
      <!-- Default panel contents -->
      <div class="panel-heading">Panel heading</div>
      <div class="panel-body">
        <p>3 -Lorem ipsum</p>
      </div>
    </div>
  </div>
  <div class="col-md-6 col-sm-12 inner">
    <div class="panel panel-default">
      <!-- Default panel contents -->
      <div class="panel-heading">Panel heading</div>
      <div class="panel-body">
        <p>4 - Lorem ipsum</p>
      </div>
    </div>
  </div>
  <div class="col-md-6 col-sm-12 inner">
    <div class="panel panel-default">
      <!-- Default panel contents -->
      <div class="panel-heading">Panel heading</div>
      <div class="panel-body">
        <p>5 - Lorem ipsum</p>
      </div>
    </div>
  </div>
  <div class="col-md-6 col-sm-12 inner">
    <div class="panel panel-default">
      <!-- Default panel contents -->
      <div...

SCSS

.container div {
  display: inline-block;
  width: 100%;
}



@mixin container-rules($columnCount) {
    .container {
      -moz-column-count: $columnCount;
      -moz-column-gap: 10px;
      -webkit-column-count: $columnCount;
      -webkit-column-gap: 10px;
      column-count: $columnCount;
      column-gap: 10px;

      
    }
    body {
      background-color: #777;
    }
}

@mixin bp-x-large($columnCount) {
   @media screen and (min-width: 1024px) {
      @content;
      @include container-rules($columnCount)
   }
}

@mixin bp-large($columnCount) {
   @media screen and (max-width:1023px) {
      @content;
      @include container-rules($columnCount)
   }
}

@mixin bp-medium($columnCount) {
   @media screen and (max-width:761px) {
      @content;
      @include container-rules($columnCount)
   }
}

@mixin bp-small($columnCount) {
   @media screen and (max-width:480px) {
      @content;
      @include container-rules($columnCount)
   }
}

@mixin define-breakpoint($columnCount) {
  &:after {
    content: $columnCount;
    display: none;
  }
}


body {
    @include bp-x-large(4){
      @include define-breakpoint("bp-4");
    }
    
    @include bp-large(3){
      @include define-breakpoint("bp-3");
    }

    @include bp-medium(2){
      @include define-breakpoint("bp-2");
    }
    
    @include bp-small(1){
      @include define-breakpoint("bp-1");
    }
}

JavaScript

(function() {
  var body = document.querySelector('body');
  var result = parseInt(getComputedStyle(body, 'after').content.split('-')[1], 10);
  var
    wrp = $(".container");
  child = wrp.find("div.inner"),
    len = $(".inner").length,

    columnCount = result,
    frag = "", frag_origin = "",
    currentWidth = 320, // default minimum-width
    _activeWidth = 720;

  function columCountAction(activeWidth) {
    if (typeof activeWidth === "undefined")
      return false;
    currentWidth = $(document).width();
    if (frag_origin == "")
      frag_origin = manipulateDom();

    if (currentWidth >= activeWidth) { // check condition width
      if (frag == "")
        frag += manipulateDom(1);
      wrp.html(frag);

    } else { // apply original DOM
      wrp.html(frag_origin);
    }
  } // columCountAction function
  function manipulateDom(check) {
    var i = k = c = 0,
      container = "";
    if (typeof check === "undefined") {
      for (i = 0; i < len; i++) {
        container += child[i].outerHTML;
        }
    } else {
      for (c = 0; c < columnCount; c++) {
				 for (i = 0; i < len; i++) {
          	if (i % (columnCount) == c) {
              <!-- container += child[i].outerHTML; -->
              console.log(i);
            }
          }
        }
    }
    return container;
  }
  if (window.attachEvent) {
    window.attachEvent('onresize', function() {
      columCountAction(_activeWidth);
    });
  } else if (window.addEventListener) {
    window.addEventListener('resize', function() {
      columCountAction(_activeWidth);
    }, true);
  } else {} //The browser does not support Javascript event binding
  window.onload = columCountAction(_activeWidth);
}());

'use strict';
var Z63 = (function(parent, $) {

  var MediaQueryListener = function() {
    this.afterElement = window.getComputedStyle ? window.getComputedStyle(document.body, ':after') : false;
    this.currentBreakpoint = '';
    this.lastBreakpoint = '';
    this.init();
  };

 ...