responsive rearrange

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 the blog post at 
    http://all-purpose-programming.blogspot.nl/2014/02/chaning-order-of-appearance-of-elements.html
    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);
            // split on hypens, since they are the commands separators
            var commands =...