title: Flexbox is not fitting on mobile
body: <p>This is my first week working with flexbox, and I like it a lot until now. I am doing everything I can to get away of floating elements. Therefore my main purpose is not a solution there is floating elements in. I run into 2 problems, that I am not quite sure of the correct saolution.</p>
  
  <p><strong>Problem 1:</strong>
  When I hit around 1200px I can see the 2 columns is starting moving together. How can that be? </p>
  
  <p><strong>Problem 2:</strong>
  Why is my columns not fitting on viewport under 768px? I can see on the mobile the <code>900x200</code> is going over the edge of the max width on telephone.</p>
  
  <p><a href="http://dev.mimsi.dk/02_local-index.html" rel="nofollow noreferrer">Example page of my code here</a>.</p>
  
  <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>.column-layout {
    max-width: 1200px;
    background-color: #fff;
    margin: 40px auto 0 auto;
  }
  
  .column-layout-one {
    max-width: 1200px;
    background-color: #fff;
    margin: 40px auto 0 auto;
  }
  
  .header-item-one {
    order: 1;
  }
  
  .header-item-two {
    order: 2;
  }
  
  @media (min-width: 768px) {
    .column-layout-one {
      display: flex;
      justify-content: space-between;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="column-layout-one"&gt;
    &lt;div class="header-item-one"&gt;
      &lt;img src="http://placehold.it/280x200"&gt;
    &lt;/div&gt;
    &lt;div class="header-item-two"&gt;
      &lt;img src="http://placehold.it/900x200"&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>