Line break in flexbox

by id0

HTML

<div class="container">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
</div>

SCSS

.container {
  display: flex;
  flex-wrap: wrap;
  margin: -4px;
  
  &::after {
    content: '';
    height: 0;
    flex-basis: 100%;
    order: 1;
  }
}

.child {
  order: 1;
  margin: 4px;
  padding: 12px;
  color: #fff;
  background: #000;
  
  &:nth-child(n+3) {
    order: 2;
  }
}