JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div data-gs-x="0" data-gs-y="0" data-gs-width="4" data-gs-height="4" class="grid-stack-item ui-draggable ui-resizable ui-resizable-autohide"> 
00
</div>
<div data-gs-x="4" data-gs-y="0" data-gs-width="4" data-gs-height="4" class="grid-stack-item ui-draggable ui-resizable ui-resizable-autohide"> 
40
</div>
<div data-gs-x="8" data-gs-y="0" data-gs-width="4" data-gs-height="4" class="grid-stack-item ui-draggable ui-resizable ui-resizable-autohide"> 
80
</div>
<div data-gs-x="0" data-gs-y="4" data-gs-width="4" data-gs-height="4" class="grid-stack-item ui-draggable ui-resizable ui-resizable-autohide"> 
04
</div>
<div data-gs-x="4" data-gs-y="4" data-gs-width="4" data-gs-height="4" class="grid-stack-item ui-draggable ui-resizable ui-resizable-autohide"> 
44
</div>
<div data-gs-x="8" data-gs-y="4" data-gs-width="4" data-gs-height="4" class="grid-stack-item ui-draggable ui-resizable ui-resizable-autohide"> 
84
</div>

JavaScript

function compare(a, b){
  if($(a).attr('data-gs-x') < $(b).attr('data-gs-x')){
    return -1;
  }else if($(a).attr('data-gs-x') == $(b).attr('data-gs-x')){
    if($(a).attr('data-gs-y') < $(b).attr('data-gs-y')){
      return -1;
    }else if($(a).attr('data-gs-y') == $(b).attr('data-gs-y')){
      return 0
    }else{
      return 1;
    }
  }
  else{
    return 1;
  }
}


$(document).ready(function(){
    data = $('.grid-stack-item');
    data.sort(compare);
    $(this.body).append('<div>Resultado</div>')
    data.each(function(){
        $(document.body).append('<div>'+$(this).attr('data-gs-x')+''+$(this).attr('data-gs-y')+'</div>');
    })
});