[Sugestão] Reposta do Desafio da aula 4

HTML

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

</section>

CSS

* {
  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-flow: row wrap;
  justify-content: space-around;

}

.quadro-html{
  order:1;
}

.quadro-css{
  order:4;
}

.quadro-react{
  order:3;
}

.quadro-angular{
   order:2;
}

.quadro-tailwind{
   order:5;
}

.quadro-javascript{
  order:6;
}