Tengo una fila de 6 elementos posicionados por flex.

1 2 3 4 5 6

Pero bajo, p. Ej. 600px Me gustaría cortarlos por la mitad y pasar a otra fila.

1 2 3 
4 5 6

Podría usar flex-wrap: wrap pero está envolviendo un elemento por ancho de pantalla especificado. Gracias por la ayuda.

PD. No quiero usar display: none y elementos duplicados.

.wrapper {
  display: flex;
}

.b {
  margin: 12px;
  width: 100px;
  height: 60px;
  background: blue;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}

@media screen and (max-width: 600px) {
  .wrapper {
    flex-wrap: wrap;
  }
}
<div class="wrapper">
  <div class='b'>1</div>
  <div class='b'>2</div>
  <div class='b'>3</div>
  <div class='b'>4</div>
  <div class='b'>5</div>
  <div class='b'>6</div>
</div>
1
John Doe 20 ene. 2021 a las 17:09

1 respuesta

La mejor respuesta

Utilice un pseudo elemento para crear una separación entre los 2 grupos de elementos:

.wrapper {
  display: flex;
}

.b {
  margin: 12px;
  width: 100px;
  height: 60px;
  background: blue;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}

@media screen and (max-width: 600px) {
  .wrapper {
    flex-wrap: wrap;
  }
  .wrapper::after {
     content:"";
     flex-basis:100%;
  }
  .wrapper .b:nth-child(n + 4) { /* the last 3 element after the "after" */
    order:2;
  }
}

/* we no more need it under 400px */
@media screen and (max-width: 400px) {
  .wrapper::after {
     content:none;
  }
}
<div class="wrapper">
  <div class='b'>1</div>
  <div class='b'>2</div>
  <div class='b'>3</div>
  <div class='b'>4</div>
  <div class='b'>5</div>
  <div class='b'>6</div>
</div>
0
Temani Afif 20 ene. 2021 a las 14:24