Estoy tratando de establecer las posiciones de las etiquetas div que tengo en mi sitio web. Cuando se carga la página web, escribí un método para obtener las etiquetas div existentes de mi base de datos. La razón por la que hago esto es porque es necesario cambiar la posición de las etiquetas div. Por lo tanto, el orden actual de las etiquetas div se almacena en la base de datos. La función que he usado para cambiar dinámicamente las etiquetas div es la siguiente. Este método se ejecuta después de invocar Window.onLoad()

 function changeDivPosition (){ getNewPosts().then(data=>{ for(var i=0;i<data.newPosts.length;i++) { var divId=data.newPosts[i].id var divX=data.newPosts[i].xPosition; var divY=data.newPosts[i].yPosition; console.log(divId,divX,divY) var styles = `${'#'+divId}{ display:flex; flex-wrap: wrap; flex-direction:row; align-content: space-around; order: ${i}; }; }` $('#'+divId).offset({top:divY, left:divX}); console.log(styles) var styleSheet = document.createElement("style") styleSheet.type = "text/css" styleSheet.innerText = styles document.head.appendChild(styleSheet) } }) }

La matriz de "datos" recupera datos json de la siguiente manera,

 0: {_id: '61371ea7d14cd809b8cf3872', id: 'mostPop', xPosition: 285, yPosition: -328.6000061035156} 1: {_id: '61371fe4d14cd809b8cf388c', id: 'sidebar-wrapper', xPosition: 0, yPosition: 0} 2: {_id: '61371ea9d14cd809b8cf387e', id: 'itemDiscount', xPosition: 285, yPosition: 217.1999969482422} 3: {_id: '61371fe9d14cd809b8cf388e', id: 'newArr', xPosition: 285, yPosition: 20}

Este método logra cambiar el orden de las etiquetas div que quiero, pero todas las etiquetas div se colocan juntas aunque configuro las coordenadas X e Y. Como se muestra en la imagen de abajo,

Me gustaría entender qué se debe cambiar para representar correctamente el diseño como se muestra a continuación.