JSFiddle - React, Tailwind, and code Playground

by Ilya Karpuk

HTML

<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="row">
  <div id="col1" class="col-sm-6">1</div>
  <div id="col2" class="col-sm-6">2</div>
  <div id="col3" class="col-sm-6 pull-right-sm">3</div>
</div>

CSS

.row * {
  border: 1px solid #000;
  height: 120px;
}

@media (min-width: 768px) {
    .pull-right-sm {
        float: right;
    }
}

JavaScript

/* PLUGIN CODE */
(function(window){
	function Orderizer(elements) {
  	this.elements = [];
    this.events = {};
		this._elementsCount = elements.length;
    this._eventsCount = 1;
    var firstOrder = [];
    var i = 0;
    var el = null;
    while(i < this._elementsCount) {
    	el = document.getElementById(elements[i]);
      el.setAttribute('data-grid-order', i);
      this.elements.push(el);
      firstOrder.push(i);
      ++i;
    }
    
    this.events[0] = firstOrder;
    
    window.addEventListener("resize", this._onReorder.bind(this), false);
  }
  
  Orderizer.prototype.reorder = function(eventQuery, newOrder) {
 		if (typeof eventQuery === 'string') {
    	switch(eventQuery) {
      	case "sm":
        	eventQuery = 768;
          break;
         case "md":
         	eventQuery = 992;
          break;
         case "lg":
         	eventQuery = 1200;
          break;
      }
    }
    
    var length = newOrder.length;
    var i = 0;
    while(i < length) {
  		--newOrder[i];
      ++i;
		}
    
    this.events[eventQuery] = newOrder;
  }
  
  Orderizer.prototype._onReorder = function(evt) {
  	var sizes = Object.keys(this.events);
    var width = evt.target.innerWidth;

    var i = 0;
    var sizesLength = sizes.length;
    while(i < sizesLength) {
			if (width > sizes[i] && width < (sizes[i + 1] || Infinity)) {
      	changeOrdering(this.elements, this.events[sizes[i]]);
      }
			++i;
    }
  }
  
  function changeOrdering(elements, order) {
  	var length = order.length;
    if (length <= 1) return;
    var i = length - 1;
    while(i > 1) {
    	elements[i - 1].parentNode.insertBefore(elements[order[i - 1]], elements[order[i]]);
      --i;
    }
  }
  
  window.Orderizer = Orderizer;
})(window);


/* PLUGIN USAGE
 * Class: Orderizer(elements) - create Orderizer instance
 * elements:Array - ids of elements in original order
 */
var orderizer = new Orderizer([
	'col1',
  'col2',
  'col3'
]);

/* Orderizer.reorder(size, order)
 * size:{String,...