use flexbox order property to change order of content for screenreaders

diff --git a/_layouts/docs.html b/_layouts/docs.html
index feecf3875984586378772e3edb05617a9f9db700..2e0e1e85df6542f02d14659e06adee7419303141 100644 (file)
--- a/_layouts/docs.html
+++ b/_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>
 

diff --git a/assets/scss/_content.scss b/assets/scss/_content.scss
index e617b8b5b2f4bb2518fe9eae48401f88b586f05e..70b4969bace4015e1cc822739ab1b83392313ea8 100644 (file)
--- a/assets/scss/_content.scss
+++ b/assets/scss/_content.scss
@@ -5,6 +5,8 @@
 //
 
 .bd-content {
+  order: 1;
+
   // Hack the sticky header
   > h2[id],
   > h3[id],

diff --git a/assets/scss/_sidebar.scss b/assets/scss/_sidebar.scss
index ea78daa8f7f30a93ee07ee07199353f9d3c77517..b8f311f209219bd1015d0c88457bfefbb7ecc2ac 100644 (file)
--- a/assets/scss/_sidebar.scss
+++ b/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);