JSFiddle - React, Tailwind, and code Playground

by B

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="row">
  <div class="col-sm-2 reorder lg">1</div>
  <div class="col-sm-3 reorder md">2</div>

  <div class="col-sm-3 reorder lg">3</div>

  <div class="col-sm-3 reorder sm">4</div>

  <div class="col-sm-10 reorder md">5</div>

  <div class="col-sm-4 reorder md">6</div>

  <div class="col-sm-4 reorder sm">7</div>

  <div class="col-sm-7 reorder md">8</div>

  <div class="col-sm-6 reorder xl">9</div>

  <div class="col-sm-6 reorder md">10</div>
</div>

CSS

.sm {
  background: purple;
  height: 12px;
}

.md {
  background: #fff000;
  height: 41px;
}

.lg {
  background: grey;
  height: 77px;
}

.xl {
  background: blue;
  height: 121px;
}

JavaScript

$(function(){


var items = $('.reorder');
items.sort(function(a, b) {
  //return +$(a).data('time') - +$(b).data('time');
console.log(a)

});

items.appendTo($('.row'));
})