title: Flex order property not working as expected
body: <p>I'm trying to get "Mac and cheese is really yum!" underneath "The main content of the site". </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#content {
    padding: 0;
    background: 0;
    float: none;
    width: auto;
  }
  .heading {
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    -webkit-flex-direction: column;
  }
  #content h1 {
    text-align: left;
    width: 100%;
    float: none;
    margin: 0 0 10px;
    font: 2.538em/1.3em;
    color: #393939;
  }
  #content .text {
    order: 1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="content"&gt;
    &lt;div class="heading"&gt;
      &lt;h1&gt;Mac and Cheese&lt;/h1&gt;
      &lt;div class="text"&gt;
        &lt;p&gt;Mac and cheese is really yum!&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="main-content"&gt;
      The main content of the site&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://codepen.io/anon/pen/KMPydJ" rel="nofollow">http://codepen.io/anon/pen/KMPydJ</a></p>
  
  <p>Any help is appreciated -- thanks!</p>