JSFiddle - React, Tailwind, and code Playground

by James

HTML

<div class="grid">
    <div class="grid-item">1</div>
    <div class="grid-item item2">2</div>
    <div class="grid-item item2">3</div>
    <div class="grid-item item2">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item item2">7 (should be under 4)</div>
    <div class="grid-item item2">8 (should be above 9)</div>
    <div class="grid-item item2">9 (should be under 8)</div>
    <div class="grid-item">10</div>
</div>

CSS

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
body {
    font-family: sans-serif;
    color: #000;
    font-weight: 300
}
/* ---- grid ---- */
 .grid {
    background: #EEE;
    max-width: 1200px;
    width: 100%;
}
/* clearfix */
 .grid:after {
    content:'';
    display: block;
    clear: both;
}
/* ---- grid-item ---- */
 .grid-item {
    width: 60%;
    height: 200px;
    float: left;
    background: #bbb;
    border: 1px solid #333;
    border-radius: 3px;
}
.item2 {
    width: 40%;
    height: 100px;
}

JavaScript

var grid = document.getElementsByClassName('grid')[0];

for(var i = 0; i < grid.children.length - 1; i++) { // iterate over children except last
  var find = [2, grid.children[i].classList.contains('item2') ? 1 : 2]; /* depending on
    current item type, looking for items [2, 1 or 2] in that order. */
  for(var f  = 0, j = i + 1; f < 2 && j < grid.children.length; j++) { /* iterate over
      all children starting after i, or until found 2 items */
    var child = grid.children[j];
    var item = child.classList.contains('item2') ? 2 : 1; // do we have 1 or 2?
    if(find[f] == item) { // is it the one we're looking for?
      if(j > i + 1) // is it ahead of where we want it to be?
        grid.insertBefore(child, grid.children[i + 1]); // Yes, so relocate...

      i++; // advance i, we moved ahead
      f++; // advance f, we found a match
      j = i; // reset j (will be j++ in the for)
    }
  }
}