JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.8.23/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div id="sortable" class="container">
    <div class="row content">
      <div class="col-md-2 col-sm-2 col-xs-2 red">
    
      </div>
      <div class="col-md-3 col-sm-3 col-xs-3 green">
    
      </div>
      <div class="col-md-3 col-sm-3 col-xs-3 blue">
    
      </div>
      <div class="col-md-4 col-sm-4 col-xs-4 yellow">
    
      </div>
    </div>
</div>

CSS

.content > div{
  min-height: 300px;
}
.red{
  background: red; 
}
.green{
  background: green; 
}
.blue{
   background: blue;
}
.yellow{
   background: yellow;
}
.ui-state-highlight{
  background: #ddd;
}

JavaScript

$(function(){
    $('#sortable').sortable({
        items: ".row > div",
        placeholder: 'ui-state-highlight',
        over: function(event, ui) {
        		var cl = ui.item.attr('class');
        		$('.ui-state-highlight').addClass(cl);
    		}
    }).disableSelection();
});