我在HTML + CSS的世界里是新的（仍然没有JS），作为家庭作业，我必须这样做（对移动的，平板电脑和台式机/笔记本电脑的响应）
Image, example from homework：

我正在做，而且一切都很好（我想是的），但是这部分我还是做不到（从下面的作业中摘录）
“然后，需要实现元素网格，允许以响应方式重新排序页面内容，并通过媒体查询在1280 px处包含断点。在此断点之后，概念标签旁边的图像将以每行3个的数量显示。每个图像的底部将有一组有关联的标签。每行标签的最大数量为3，并且每个标签的边框必须至少由一行分隔。”
我该怎么做？

这是我的密码

* {
  box-sizing: border-box;
}

h1 {
  padding-top: 10px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  width: 100%;
}

h3 {
  padding-top: -10px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  width: 100%;
}

p {
  text-align: justify;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
}

img {
  width: 100%;
}

/* Dispositivos pequeños (teléfonos, 600px y menos) */

@media only screen and (max-width: 600px) {
  [class*="col-"] {
    width: 100%;
    padding: 10px;
  }
}

.etiqueta {
  display: flex;
  color: white;
  font-size: 20px;
  text-align: center;
  font-family: monospace;
  background-color: gray;
  border-style: solid gray;
  border-radius: 3px;
  padding-top: 3px;
  padding-right: 3px;
  padding-bottom: 3px;
  padding-left: 3px;
  margin-top: 3px;
}

/* Dispositivos medios (tablets horizontales, 768px y más) */

@media only screen and (min-width: 768px) {
  @media only screen and (min-width: 768px) {
    [class*="col-"] {
      width: 100%;
      padding: 10px;
    }
    .col-t1 {
      width: 8.33%;
    }
    .col-t2 {
      width: 16.66%;
    }
    .col-t3 {
      width: 25%;
    }
    .col-t4 {
      width: 33.33%;
    }
    .col-t5 {
      width: 41.66%;
    }
    .col-t6 {
      width: 50%;
    }
    .col-t7 {
      width: 58.33%;
    }
    .col-t8 {
      width: 66.66%;
    }
    .col-t9 {
      width: 75%;
    }
    .col-t10 {
      width: 83.33%;
    }
    .col-t11 {
      width: 91.66%;
    }
    .col-t12 {
      width: 100%;
    }
    [class*="col-"] {
      float: left;
    }
    .row::after {
      content: "";
      clear: both;
      display: table;
    }
    .etiqueta {
      display: inline-flex;
      color: white;
      font-size: 15px;
      text-align: center;
      font-family: monospace;
      background-color: gray;
      border-style: solid gray;
      border-radius: 3px;
      padding-top: 3px;
      padding-right: 3px;
      padding-bottom: 3px;
      padding-left: 3px;
      margin-top: 3px;
    }
  }
}

/* Para versión escritorio: */

@media only screen and (min-width: 1280px) {
  [class*="col-"] {
    width: 100%;
    padding: 10px;
  }
  .col-1 {
    width: 8.33%;
  }
  .col-2 {
    width: 16.66%;
  }
  .col-3 {
    width: 25%;
  }
  .col-4 {
    width: 33.33%;
  }
  .col-5 {
    width: 41.66%;
  }
  .col-6 {
    width: 50%;
  }
  .col-7 {
    width: 58.33%;
  }
  .col-8 {
    width: 66.66%;
  }
  .col-9 {
    width: 75%;
  }
  .col-10 {
    width: 83.33%;
  }
  .col-11 {
    width: 91.66%;
  }
  .col-12 {
    width: 100%;
  }
  [class*="col-"] {
    float: left;
  }
  .row::after {
    content: "";
    clear: both;
    display: table;
  }
  .etiqueta {
    display: inline-flex;
    color: white;
    font-size: 10px;
    text-align: center;
    font-family: monospace;
    background-color: gray;
    border-style: solid gray;
    border-radius: 3px;
    padding-top: 3px;
    padding-right: 3px;
    padding-bottom: 3px;
    padding-left: 3px;
    margin-top: 3x;
    margin-right: 3x;
    margin-bottom: 3x;
    margin-left: 3x;
  }
}

<div>
  <h1 class="formato-titulos">Galería de Imágenes</h1>
  <h3 class="formato-titulos"><strong>Fotógrafo: </strong><i>Allan Brito Delgado</i></h3>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="row">
  <div class="col-3 col-t4">
    <img src="img_ABP_individual_3.2/dados.jpg">
    <div class="etiqueta">Juegos</div>
    <div class="etiqueta">Meta</div>
    <div class="etiqueta">Dado</div>
    <div class="etiqueta">Pieza</div>
    <div class="etiqueta">Tablero</div>
  </div>
  <div class="col-3 col-t4">
    <img src="img_ABP_individual_3.2/nintendo_switch.jpg">
    <div class="etiqueta">Nintendo Switch</div>
    <div class="etiqueta">Mario Kart 8</div>
    <div class="etiqueta">Consola portátil</div>
    <div class="etiqueta">Videojuego</div>
  </div>
  <div class="col-3 col-t4">
    <img src="img_ABP_individual_3.2/luigi_yoshi_mario.jpg">
    <div class="etiqueta">Luigi</div>
    <div class="etiqueta">Mario</div>
    <div class="etiqueta">Yoshi</div>
    <div class="etiqueta">Super Mario Bros</div>
  </div>
  <div class="col-3 col-t4">
    <img src="img_ABP_individual_3.2/img_pc.jpg">
    <div class="etiqueta">PC</div>
    <div class="etiqueta">Workspace</div>
    <div class="etiqueta">Programación</div>
    <div class="etiqueta">Doble pantalla</div>
    <div class="etiqueta">Streaming</div>
  </div>
</div>

我试图使每一个图像下面的每行最多3个标签（如果图像有超过3个标签，第4和第5个标签需要显示在图像下面的第二行）。