JSFiddle - React, Tailwind, and code Playground

by meo

HTML

<div class="left">
<div class="c1">L1</div>
<div class="c1">L2</div>
<div class="c2">L3</div>
<div class="c1">L4</div>
</div>
<div class="right">
<div class="c2">R1</div>
<div class="c1">R2</div>
<div class="c1">R3</div>
</div>
<div class="result"></div>

CSS

.left, .right {
    width: 50%;
    float: left;
    font-size: 0px;
}
.c1, .c2 {
    font-size: 40px;
    height: 100px;
    outline: 1px dotted rgba(255,100,0,0.5);
    text-align: center;
}
.c1 {
    display: inline-block;
    width: 50%;
}

JavaScript

var moveDown = function(modArray, index){

  if(index == 0){return modArray;}
    
  modArray.splice(index-1, 2, modArray[index], modArray[index-1]);
    
  return modArray;
}


var DomSort = function(){
    this.constants = {
        originalGroups: [],
        groups: [],
        totalOriginalGrps: 0,
        sortedContent: null,
        totalGrps: 0
    };
        
    this.prioFunctions = [];
};

DomSort.prototype.addElementGroups = function() {
    var addGroup, constants = this.constants;
    
    addGroup = function( $grp ){
        constants.originalGroups.push( $grp );
        constants.totalOriginalGrps++;
    };

    for(var group in arguments){
        addGroup( arguments[ group ] );
    }
};
    
DomSort.prototype.addPrioFunction = function( f ) {
    this.prioFunctions.push(f);
};

DomSort.prototype.applyPrioFunctions = function(){
    var prioFunctions = this.prioFunctions;
    for(var prioFunction in prioFunctions){
        this.constants.sortedContent = prioFunctions[prioFunction].call( this.constants.sortedContent );
    }
};
    
DomSort.prototype.applySorting = function(){
    var newContent, sortedContentIds, sortedContent,
        originalGroups = this.constants.originalGroups;
    
    newContent = {};
    sortedContentIds = [];
    sortedContent = [];
    
    for(var origGroupID in originalGroups){
        
        var $grpContent = originalGroups[origGroupID];
        $grpContent.each(function(i){
          var id, $this = $(this);
          id = i + "." + origGroupID;
          newContent[ id ] = $this;
          sortedContentIds.push( id );
        });
    }
    
    sortedContentIds.sort();
    
    for( var id in sortedContentIds ){
        sortedContent.push( newContent[ sortedContentIds[id] ] );
    }
                            
    this.constants.sortedContent = sortedContent;
    
    this.applyPrioFunctions();
};

DomSort.prototype.reflowInto = function(){
    var mergedContent, constants = this.constants;
    mergedContent =...