title: Bootstrap 3 push/pull and accessibility
body: <p>I'm trying to make our webpages more accessible and am confused about the tab order for push/pull sections.</p>
  <p>Here is an example:
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section class="section"&gt;
    &lt;div class="container-fluid"&gt;
       &lt;div class="row"&gt;
          &lt;div class="col-md-6"&gt;
             &lt;a href="#" aria-label="Lorem ipsum" target="_blank"&gt;&lt;img src="https://via.placeholder.com/770x560" alt="Image" /&gt;&lt;/a&gt;                    
          &lt;/div&gt;
          &lt;div class="col-md-6"&gt;
              &lt;h3&gt;Lorem ipsum&lt;/h3&gt;
              &lt;p&gt;Sed ut perspiciatis unde omnis iste natus&lt;/p&gt;
              &lt;div class="btn"&gt;
                 &lt;a href="#" role="button" tabindex="0" target="_blank"&gt;Lorem ipsum&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
       &lt;/div&gt;
       &lt;div class="row"&gt;
          &lt;div class="col-md-6 col-md-push-6"&gt;
             &lt;a href="#" aria-label="Lorem ipsum" target="_blank"&gt;&lt;img src="https://via.placeholder.com/770x560" alt="Image" /&gt;&lt;/a&gt;         
          &lt;/div&gt;
          &lt;div class="col-md-6 col-md-pull-6"&gt;
              &lt;h3&gt;Lorem ipsum&lt;/h3&gt;
              &lt;p&gt;Sed ut perspiciatis unde omnis iste natus&lt;/p&gt;
              &lt;div class="btn"&gt;
                 &lt;a href="#" role="button" tabindex="0" target="_blank"&gt;Lorem ipsum&lt;/a&gt;
              &lt;/div&gt;
           &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt; </code></pre>
  </div>
  </div>
  </p>
  <p>When I tab through the row with push/pull, the image is focused first, and the button focused second even though it's displayed on desktop as button first and image second. I understand why it does this, but is this best practice for accessibility? Seems like it'd be confusing for the user. And if this is not best practice, how would I reverse the tab order? Would I need to go through the entire webpage and set <code>tabindex=&quot;0&quot;, &quot;1&quot;, &quot;2&quot;</code>, etc. for every focusable element?</p>