diff --git a/assets/css/devportal.css b/assets/css/devportal.css
index e1b962b12d..48403cb5ed 100644
--- a/assets/css/devportal.css
+++ b/assets/css/devportal.css
@@ -372,12 +372,6 @@ pre code {
   list-style-type: none;
 }
 
-.dev_nav_wrapper {
-  position: fixed;
-  width: 100%;
-  overflow-y: scroll;
-  top: 130px;
-}
 td {
   border: 1px solid #dbdde2;
   padding: 0.2em;
@@ -713,17 +707,17 @@ th {
   max-height: calc(100% - 150px);
   max-width: 16.66667%;
   overflow: auto;
+  z-index: 10;
 }
 
 /* Responsive design for different viewscreens -------------------------------*/
 
 @media (max-width: 768px) {
-  .dev_nav_wrapper,
-  .sidebar {
+  #page-toc-wrapper {
+    position: static;
     display: block;
     clear: both;
     overflow-y: inherit;
-    position: static;
     max-width: 100%;
   }
   .main {
@@ -799,17 +793,6 @@ th {
   #goog-gt-tt {
     display: none;
   }
-  .dev_nav_wrapper {
-    position: static !important;
-  }
-  .sidebar:before {
-    display: none !important;
-  }
-  .sidebar {
-    padding-top: 0 !important;
-    display: block !important;
-    float: none !important;
-  }
   h1 {
     page-break-before: always;
   }
diff --git a/tool/template-base.html b/tool/template-base.html
index 094dc0584b..01761b95cf 100644
--- a/tool/template-base.html
+++ b/tool/template-base.html
@@ -70,22 +70,26 @@
 
   <div class="container-fluid" role="document" id="main_content_wrapper">
     <div class="row">
-      {% if currentpage.sidebar != "disabled" %}
-      <aside class="sidebar col-md-3 col-xl-2 p-0" role="complementary">
-          {% block left_sidebar %}
-            {% include "template-sidebar_nav.html" %}
-          {% endblock %}
+      <!-- Right sidebar first so it's at the beginning for mobile layouts -->
+      {% if currentpage.sidebar != "disabled" and currentpage.sidebar != "left_only" %}
+      <aside class="right-sidebar col-md-3 col-xl-2 p-0 order-md-last" role="complementary">
+          {% block right_sidebar %}{% endblock %}
       </aside>
       {% endif %}
-      <main class="main {% if currentpage.sidebar == "left_only" %}col-md-9 col-xl-10{% elif currentpage.sidebar == "disabled" %}col-md-12 col-xl-12{% else %}col-md-6 col-xl-8{% endif %} p-0" role="main" id="main_content_body">
+
+      <!-- main column -->
+      <main class="main {% if currentpage.sidebar == "left_only" %}col-md-8 col-xl-10{% elif currentpage.sidebar == "disabled" %}col-md-12 col-xl-12{% else %}col-md-6 col-xl-8{% endif %} p-0" role="main" id="main_content_body">
           {% block breadcrumbs %}
             {% include 'template-breadcrumbs.html' %}
           {% endblock %}
           {% block main %}{% endblock %}
       </main>
-      {% if currentpage.sidebar != "disabled" and currentpage.sidebar != "left_only" %}
-      <aside class="right-sidebar col-md-3 col-xl-2 p-0" role="complementary">
-          {% block right_sidebar %}{% endblock %}
+      {% if currentpage.sidebar != "disabled" %}
+      <!-- Left sidebar last so it's at the end for mobile -->
+      <aside class="sidebar col-md-3 col-xl-2 p-0 order-md-first" role="complementary">
+          {% block left_sidebar %}
+            {% include "template-sidebar_nav.html" %}
+          {% endblock %}
       </aside>
       {% endif %}
     </div>