title: Grid different order on smaller screen
body: <p>I have this order in my grid when it's a normal sized computer screen:</p>
  
  <pre><code>{1}{2}
  {3}{4}
  {5}{6}
  </code></pre>
  
  <p>When i make the screen smaller i want it to reorder, but it doesn't reorder correctly. </p>
  
  <p>Actual: </p>
  
  <pre><code>{1}
  {2}
  {3}
  {4}
  {5}
  {6}
  </code></pre>
  
  <p>Wanted:</p>
  
  <pre><code>{1}
  {3}
  {5}
  {2}
  {4}
  {6}
  </code></pre>
  
  <p>What kind of CSS formatting do I have to use to achieve the wanted display of my elements.</p>
  
  <p>Current CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>.general {
    background-color: pink;
    order: 1;
  }
  .anonymous{
    background-color: aqua;
    order:4;
  }
  .dead{
    background-color: blue;
    order: 2;
  }
  .dead-and-archived {
    background-color: green;
    order:5;
  }
  .created {
    background-color: yellow;
    order:3;
  }
  .private {
    background-color: red;
    order:6;
  } 
  </code></pre>
  
  <p>Current HTML:</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
    &lt;div class="row"&gt;
      &lt;div class="general col-sm-4" &gt;
        General
      &lt;/div&gt;
      &lt;div class="anonymous col-md-8"&gt;
        Anonymous
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
      &lt;div class=" dead col-md-4"&gt;
        Dead entities
      &lt;/div&gt;
      &lt;div class=" dead-and-archived col-md-8"&gt;
        Dead and archived
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
      &lt;div class="created col-md-4 "&gt;
        Created entities
      &lt;/div&gt;
      &lt;div class="private col-md-8"&gt;
        private user repos
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>