title: Force break line inside flexbox
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    margin: 0;
    padding: 0;
  }
  
  .cnt {
    display: flex;
    margin: 50px;
    background: #ffff00;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  
  .cnt div {
    width: 100px;
    height: 100px;
    background: #999;
    margin: 10px;
  }
  
  .cnt::after {
    content: '';
    width: 100%;
  }
  
  .flex-item:nth-child(6) {
    order: 1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="cnt"&gt;
    &lt;div class="flex-item one"&gt;&lt;/div&gt;
    &lt;div class="flex-item two"&gt;&lt;/div&gt;
    &lt;div class="flex-item three"&gt;&lt;/div&gt;
    &lt;div class="flex-item four"&gt;&lt;/div&gt;
    &lt;div class="flex-item five"&gt;&lt;/div&gt;
    &lt;div class="flex-item six"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The problem I have is that I can break line only on the last item... How am I actually able to brake line whenever I want it to? For example, if I want to break line after class <code>.two</code>, how can I do it?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>I'm an idiot. This <strong>is</strong> actually how you do it. You just need to pass the items you want to be in the next <code>order</code>. Obviously you may do this only once.</p>
  
  <p>So, to break line in the second box, you need to pass the <code>.three</code>, <code>.four</code>, <code>.five</code> and <code>.six</code> to <code>order: 1</code>. See here: <a href="https://jsfiddle.net/r33muub3/4/" rel="nofollow noreferrer">https://jsfiddle.net/r33muub3/4/</a> 
  I changed the <code>justify-content</code> to <code>left</code> so it will be much more obvious</p>