JSFiddle - React, Tailwind, and code Playground

by Michael Dibbets

HTML

<div id="consol"></div>
<div class="conditional conditional_mainwrap">
  <div id="black" class="conditional conditional_0_875_order_4 conditional_875_3000_order_1">
    <div id="conditional_wrap_green1" class="conditional">
        <div id="green1" class="conditional conditional_0_875_pop-order_2 conditional_875_3000_repop whoa">
            <span>1</span>
        </div>
    </div>
    <div id="green2">
        <span>2</span>
    </div>
    <div id="green3">
        <span>3</span>
    </div>
</div>
<div id="red" class="conditional conditional_0_875_order_1 conditional_875_3000_order_2">
    <div id="yellow1">
        <span>1</span>
    </div>
    <div id="yellow2">
        <span>2</span>
    </div>
</div>

<div id="blue" class="conditional conditional_0_875_order_3 conditional_875_3000_order_3">
    <div id="purple1">
        <span>1</span>
    </div>
    <div id="purple2">
        <span>2</span>
    </div>
    <div id="purple3">
        <span>3</span>
    </div>
</div>
</div>

CSS

#consol {
    font-family:courier;
    color:lime;
    font-weight:400;
    background-color:black;
    border:1px inset gray;
    padding-left:10px;

}
span
    {
        display:inline-block;
        margin: 50px 50px;
        font-size:4em;
        font-weight:800;
        text-shadow: 3px 3px 10px gray;
        font-family:sans-serif;
    }

#red {
    background-color:red;
    border: 1px solid brown;
    display:inline-block;
}
#yellow1, #yellow2
    {
    background-color:yellow;
    border: 1px solid lightbrown;
    }
#black
    {
    display:inline-block;
    border:1px solid black;
    background-color:gray;
    }
#green1, #green2, #green3
    {
    display:inline-block;
    background-color:lime;
    border:1px solid darkgreen;
    }
#blue
    {
    display:inline-block;
    border:1px solid darkblue;
    background-color:lightblue;
    }
#purple1, #purple2, #purple3
    {
    display:block;
    border: 1px solid darkpurple;
    background-color:purple;
    }
/* desktops and big resolution screens that can handle the normal layout */
@media only screen and (min-width: 875px) {
#red {
    width:600px;
}

#yellow1, #yellow2
    {
    width:250px;
    height:300px;
    margin:20px;
    float:left;
    }
#black
    {
    float:right;
    }
#green1, #green2, #green3
    {
    clear:both;
    float:right;
    width:200px;
    height:150px;
    margin:20px;
    }
#blue
    {
    width:600px;
    }
#purple1, #purple2, #purple3
    {
    width:150px;
    margin:25px;
    float:left;
    height:200px;
    }
}
/* small screens */
@media only screen and (max-width: 875px) {
#red {
    width:100%;
}
#yellow1, #yellow2
    {
    width:90%;
    margin:5%;
    float:left;
    }
#black
    {
    width:100%;
    }
#green1, #green2, #green3
    {
    width:90%;
    margin:5%;
    }
#blue
    {
    width:100%;
    }
#purple1, #purple2, #purple3
    {
   width:90%;
    margin:5%;
    }
}

JavaScript

/* Copyright 2014 Michael Dibbets, all rights reserved. 
    This library is free to use for non commercial use, if you leave a comment below this blog post
    where you are implementing this libary.
    For commercial use contact me to come to an licensing agreement.
    mdibbets [at] outlook [dot] com
    My prices are fair and reasonable.
    ususage of this script without notification of the author 
    in the before mentioned ways is not permitted.
*/
function JX_responsive_sort(precursor)
    {
    if(typeof precursor == 'undefined')
        {
        precursor = 'conditional';
        }
    // our sorting array
    var orderofthings = new Array();
    // window width 
    var windowwidth = $(window).innerWidth();
    // get all classes named conditional
    jQuery('.'+precursor).each(function()
       {
       // get all classes of the conditional element
       var classList = jQuery(this).attr('class').split(/\s+/);
       // loop through all classes of the current element
       // backwards compatible... of course
       for(c=0;c<classList.length;c++)
          {
          item=classList[c];
          // no need for this one bub
          if(item != precursor)
              {
              if(item.substring(0,11) == precursor)
                  {
                  // sanitise the item
                  item = item.substring(12,item.length);
                  // from which screenwidth is this rule active?
                  var startwidth = parseInt(item.substring(0,item.indexOf('_'))); 
                  // to which screenwidth is this rule active?
                  var endwidth = parseInt(item.substring(item.indexOf('_')+1,item.indexOf('_',item.indexOf('_')+1)));
                  if(windowwidth >= startwidth && windowwidth <= endwidth)
                      {
                      // remove the widths so all that remains are commands
                      item = item.substring(item.indexOf('_',item.indexOf('_')+1)+1,item.length);    
               ...