Desafío manos a la obra

cordial saludo

yo lo que hice fue crear una clase en cada uno de los divs de las imagenes y ya con esas clases usar la propiedad "order" y asi ubicar las imagenes donde correspondia. claro que inicialmente use el "flex-warp: wrap" para que tuviera salto de linea

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Jura", sans-serif;
  background: linear-gradient(180deg, #154580 0%, #041833 100%);
  color: white;
  height: 100vh;
  width: 100vw;
}

.titulo {
  position: absolute;
  top: 30px;
  left: 180px;
  font-size: 34px;
  font-weight: bold;
  text-decoration: underline 3px;
  text-underline-offset: 25px;
}

.cuadros__container {
  width: 1150px;
  height: 600px;
  position: absolute;
  left: 176px;
  top: 120px;
  background: #525c63d8;
  padding: 10px;
  border-radius: 10px;
}

  .cuadros__container{
    display:flex;  
    flex-wrap:wrap;
   
}

  .html{
    order:-1;
  
}

  .tailwind{
    order:4;
}



    .js{
    order:4
}



  .css{
   order:3; 
}