Wrap half of items in a row after specified screen width

Question

I have a row of 6 items positioned by flex.

1 2 3 4 5 6

But under e.g. 600px I would like to cut them in half and move to another row.

1 2 3 
4 5 6

I could use flex-wrap: wrap but it is wrapping one element per specified screen width. Thanks for help.

PS. I Dont want to use display: none and duplicate elements.

.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>

related: https://stackoverflow.com/a/65782390/8620333 .. check the last snippet of the answer — Temani Afif, Jan 20 '21 at 14:18

score 0 · Accepted Answer · answered Jan 20 '21 at 14:24

Use a pseudo element to create a separation between the 2 groups of elements:

.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>

This time you have been the first one ! – vals Jan 20 '21 at 14:30 — vals, Jan 20 '21 at 14:30

Wrap half of items in a row after specified screen width

1 Answers1