I am trying to replicate a set of bootstrap grid screens, so I can embed objects in the exact position. Each screen is custom designed but we have the data for each of the objects in the screen like x,y postion, height (value in %), width (value in %), row, col, colspan and rowspan. We have an array of objects for each screen with the data. Each object is identified by the unique id.

An example screen and array data is below

[{
 bounds: {y: 0, x: 0, width: 100, height: 5.555555555555555}
 col: 0
 colspan: 36
 id: "kUpXjV"
 row: 0
 rowspan: 1
},
{
 bounds: {y: 38.88888888888889, x: 50, width: 25, height: 61.111111111111114}
 col: 18
 colspan: 9
 id: "CfRCPp"
 row: 7
 rowspan: 11
},
{
 bounds: {y: 38.88888888888889, x: 25, width: 25, height: 61.111111111111114}
 col: 9
 colspan: 9
 id: "XEUKJK"
 row: 7
 rowspan: 11
},{
 bounds: {y: 38.88888888888889, x: 0, width: 25, height: 61.111111111111114}
 col: 0
 colspan: 9
 id: "hgjft"
 row: 7
 rowspan: 11
},
{
 bounds: {y: 22.22222222222222, x: 75, width: 25, height: 77.77777777777779}
 col: 27
 colspan: 9
 id: "mpaLGbj"
 row: 4
 rowspan: 14
},
{
 bounds: {y: 5.555555555555555, x: 0, width: 25, height: 33.33333333333333}
 col: 0
 colspan: 9
 id: "LmXFRrD"
 row: 1
 rowspan: 6
},
{
 bounds: {y: 5.555555555555555, x: 25, width: 25, height: 33.33333333333333}
 col: 9
 colspan: 9
 id: "emFBcBy"
 row: 1
 rowspan: 6
},
{
 bounds: {y: 5.555555555555555, x: 75, width: 25, height: 16.666666666666664}
 col: 27
 colspan: 9
 id: "edjZmNm"
 row: 1
 rowspan: 3
},
{
 bounds: {y: 5.555555555555555, x: 50, width: 25, height: 33.33333333333333}
 col: 18
 colspan: 9
 id: "bJvhbjb"
 row: 1
 rowspan: 6

}

An example of the screen im trying to replicate looks like

I tried to arrange the items by position top left in ascending order and then build out the grid from the sorted object, but the sorting is not working correctly and the rendering position of the objects is also mixed up. Would there be another way to accomplish this?

 odata.sort(function (a, b) {
  //sort by x and then by y
  return a.bounds.x == b.bounds.x ? a.bounds.y - b.bounds.y : a.bounds.x- b.bounds.x;
  });