Minha resolução para o exercício

Coloquei em prática o que vimos sobre Order e consegui esse resultado:

Adicionei classes no HTML

<h1 class="titulo">Tecnologias Front-end</h1>
<section class="quadros__container">
  <div>
    <img class="html" src="https://caelum-online-public.s3.amazonaws.com/2577-flexbox/html.png" alt="Logo HTML">
  </div>
  <div>
    <img class="css" src="https://caelum-online-public.s3.amazonaws.com/2577-flexbox/css.png" alt="Logo CSS">
  </div>
  <div>
    <img class="angular" src="https://caelum-online-public.s3.amazonaws.com/2577-flexbox/angular.png" alt="Logo Angular">
  </div>
  <div>
    <img class="tai" src="https://caelum-online-public.s3.amazonaws.com/2577-flexbox/tailwind.png" alt="Logo Tailwind">
  </div>
  <div>
    <img class="react" src="https://caelum-online-public.s3.amazonaws.com/2577-flexbox/react.png" alt="Logo React">
  </div>
  <div>
    <img class="js" src="https://caelum-online-public.s3.amazonaws.com/2577-flexbox/js.png" alt="Logo JavaScript">
  </div>

</section>

E após incluir as alterações na classe .quadros__container, logo abaixo usei order para ordenar.

* {
  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;
}

.quadros__container {
  width: 1150px;
  height: 600px;
  position: absolute;
  left: 176px;
  top: 120px;
  background: #525c63d8;
  padding: 10px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.html {
  order: 1;
}

.css {
  order: 4;
}

.angular {
  order: 2;
}

.tai {
  order: 5;
}

.react {
  order: 3;
}

.js {
  order: 6;
}

O resultado