title: Flexbox Order and Tabbing Navigation
body: <p>I would like to use <strong>display: flex</strong> to change the <strong>order</strong> of divs with <em>line</em> class, but I'd like to maintain this TAB navigation order: A → B → C → D.</p>
  
  <p>As you can see in the snippets, the first example works fine (the DOM sequence is the same of the Order), but in the second example the tab follow the DOM sequence.</p>
  
  <p>Any chance without using javascript?</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>.container {
    display: flex;
    flex-direction: column;
  }
  
  .line {
    padding: 5px;
    border: 1px solid gray;
    margin-bottom: 5px;
  }
  
  .line span {
    margin-left: 7px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h2&gt;
    Tabbing navigation OK
  &lt;/h2&gt;
  &lt;div class="container"&gt;
    &lt;div class="line" style="order: 1;"&gt;&lt;input value="A"&gt;&lt;span&gt;1st div - Order: 1&lt;/span&gt;&lt;/div&gt;
    &lt;div class="line" style="order: 2;"&gt;&lt;input value="B"&gt;&lt;span&gt;2nd div - Order: 2&lt;/span&gt;&lt;/div&gt;
    &lt;div class="line" style="order: 3;"&gt;&lt;input value="C"&gt;&lt;span&gt;3rd div - Order: 3&lt;/span&gt;&lt;/div&gt;
    &lt;div class="line" style="order: 4;"&gt;&lt;input value="D"&gt;&lt;span&gt;4th div - Order: 4&lt;/span&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;h2&gt;
    Tabbing navigation KO
  &lt;/h2&gt;
  &lt;div class="container"&gt;
    &lt;div class="line" style="order: 1;"&gt;&lt;input value="A"&gt;&lt;span&gt;1st div - Order: 1&lt;/span&gt;&lt;/div&gt;
    &lt;div class="line" style="order: 4;"&gt;&lt;input value="C"&gt;&lt;span&gt;2nd div - Order: 4&lt;/span&gt;&lt;/div&gt;
    &lt;div class="line" style="order: 3;"&gt;&lt;input value="C"&gt;&lt;span&gt;3rd div - Order: 3&lt;/span&gt;&lt;/div&gt;
    &lt;div class="line" style="order: 2;"&gt;&lt;input value="B"&gt;&lt;span&gt;4th div - Order: 2&lt;/span&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>JSFiddle link <a href="https://jsfiddle.net/054hua3r/" rel="nofollow noreferrer">here</a>.</p>
  
  <p>Thanks in advance</p>