title: What is the proper way to order vendor prefixes?
body: <p><strong>The rub</strong></p>
  
  <ul>
  <li><a href="https://css-tricks.com/using-flexbox/" rel="noreferrer">CSS Tricks</a> says that the order of the <code>display</code> vendor prefixes for flexbox is important and shows one ordering (<code>-webkit-box</code>, <code>-moz-box</code>, <code>-ms-flexbox</code>, <code>-webkit-flex</code>, <code>flex</code>)</li>
  <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Advanced_layouts_with_flexbox" rel="noreferrer">MDN</a> shows a different order than CSS Tricks and swaps <code>-moz-box</code> out for <code>-moz-flex</code> (<code>-webkit-box</code>, <code>-webkit-flex</code>, <code>-moz-flex</code>, <code>-ms-flexbox</code>, <code>flex</code>)</li>
  <li><a href="https://github.com/thoughtbot/bourbon/blob/v4-stable/app/assets/stylesheets/css3/_flex-box.scss" rel="noreferrer">Bourbon</a> shows yet a different order and brings in <code>box</code>, which the other two pages don't even mention (<code>-webkit-box</code>, <code>-moz-box</code>, <code>box</code>, <code>-webkit-flex</code>, <code>-moz-flex</code>, <code>-ms-flexbox</code>, <code>flex</code>)</li>
  </ul>
  
  <p><strong>The questions</strong></p>
  
  <ul>
  <li>Is order really important?</li>
  <li>What is the correct way to do this?</li>
  </ul>