use flexbox order property to change order of content for screenreaders

Author: mdo

_layouts/docs.html

@@ -17,18 +17,19 @@
         <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
           {% include docs-sidebar.html %}
         </div>
-        <main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
-          <h1 class="bd-title" id="content">{{ page.title }}</h1>
-          <p class="bd-lead">{{ page.description }}</p>
-          {% include ads.html %}
-          {{ content }}
-        </main>
 
         {% if page.toc %}
           <div class="d-none d-xl-block col-xl-2 bd-toc">
             {{ content | toc_only }}
           </div>
         {% endif %}
+
+        <main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
+          <h1 class="bd-title" id="content">{{ page.title }}</h1>
+          <p class="bd-lead">{{ page.description }}</p>
+          {% include ads.html %}
+          {{ content }}
+        </main>
       </div>
     </div>
 

assets/scss/_content.scss

@@ -5,6 +5,8 @@
 //
 
 .bd-content {
+  order: 1;
+
   // Hack the sticky header
   > h2[id],
   > h3[id],

assets/scss/_sidebar.scss

@@ -10,6 +10,7 @@
     top: 4rem;
     max-height: calc(100vh - 4rem);
   }
+  order: 2;
   padding-top: 1.5rem;
   padding-bottom: 1.5rem;
   overflow-x: visible;
@@ -49,6 +50,7 @@
 //
 
 .bd-sidebar {
+  order: 0;
   background-color: #f5f2f9;
   border-bottom: 1px solid rgba(0,0,0,.1);