JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="wrapper wrapper-content animated fadeInRight" data-par_id="p1">
  <div class="row" data-par_id="p2">
    <div class="col-lg-6" data-col_id="c1">
      <div class="ibox">
        <div class="ibox-title">
          <h5>Element 1</h5>
        </div>
        <div class="ibox-content">
        </div>
      </div>
    </div>
    <div class="col-lg-6" data-col_id="c2">
      <div class="ibox">
        <div class="ibox-title">
          <h5>Element 2</h5>
        </div>
        <div class="ibox-content">
        </div>
      </div>
    </div>
  </div>
  <div class="row" data-par_id="p3">
    <div class="col-lg-6" data-col_id="c3">
      <div class="ibox">
        <div class="ibox-title">
          <h5>Element 3</h5>
        </div>
        <div class="ibox-content">
        </div>
      </div>
    </div>
    <div class="col-lg-6" data-col_id="c4">
      <div class="ibox">
        <div class="ibox-title">
          <h5>Element 4</h5>
        </div>
        <div class="ibox-content">
        </div>
      </div>
    </div>
  </div>
  <div class="row" data-par_id="p4">
    <div class="col-lg-6" data-col_id="c5">
      <div class="ibox">
        <div class="ibox-title">
          <h5>Element 5</h5>
        </div>
        <div class="ibox-content">
        </div>
      </div>
    </div>
  </div>
</div>

JavaScript

function WinMove() {

  var element = ".row";
  var handle = ".ibox-title";
  var connect = ".row";

    (function() {
      // get saved positions
      var positions = localStorage.getItem('all_orders')
      console.log(positions)
      positions = positions ? JSON.parse(positions) : []
      // sort the list
      for (var i in positions) {
        var element = positions[i]
        $('[data-par_id="' + element.par_id + '"]').append(
          $('[data-col_id="' + element.col_id + '"]').detach()
        )
      }
    }) ()

  $(element).sortable({
      update: function(e, ui) {
        var parent = ui.item.closest('[data-par_id]');
        var positions = []
        $('[data-col_id]').each(function() {
          positions.push({
            col_id : $(this).data('col_id'),
            par_id : $(this).closest('[data-par_id]').data('par_id')
          })
        })
        localStorage.setItem('all_orders', JSON.stringify(positions))
        console.log(JSON.stringify(positions))
      },
    handle: handle,
    connectWith: connect,
    tolerance: 'pointer',
    forcePlaceholderSize: true,
    opacity: 0.8
  }).disableSelection();
}

$(document).ready(function() {
  WinMove()
})