title: Flexbox - Wrap Center Item on New Line First
body: <p>I am using Flex Box to create a traditional float items list.  I have three items structured like:</p>
  
  <pre><code>&lt;section&gt;
      &lt;div&gt;
          item one
      &lt;/div&gt;
      &lt;div&gt;
          item two
      &lt;/div&gt;
      &lt;div&gt;
          item three
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>with CSS:</p>
  
  <pre><code>section{
      display: flex;
      flex-wrap: wrap;
  }
  div{
      width: 33%;
      min-width: 200px;
      border: 1px solid black;
  }
  </code></pre>
  
  <p>In this current format, <code>item three</code> will always be the first child pushed to a new line if the width of the screen drops below a threshold.  </p>
  
  <p>Is there anyway to configure Flex Box so that <code>item two</code> is always the first to drop?</p>
  
  <p><a href="https://jsfiddle.net/vp696hp6/" rel="nofollow noreferrer">JSFiddle</a></p>