diff --git a/doc-tool/resources/_layouts/doc-page.html b/doc-tool/resources/_layouts/doc-page.html
index c1d15a8fdd10..fc3821a46071 100644
--- a/doc-tool/resources/_layouts/doc-page.html
+++ b/doc-tool/resources/_layouts/doc-page.html
@@ -13,10 +13,10 @@
     {% include "sidebar" %}
 
     <div id="content-body" class="doc-page-body">
+        <h1 id="doc-page-title">{{ page.title }}</h1>
         <a id="edit-on-github" href="{{ site.projectUrl }}/edit/master/{{ site.root }}/{{ page.url }}">
             Edit this page on GitHub
         </a>
-        <h1 id="doc-page-title">{{ page.title }}</h1>
         <hr/>
         <div id="doc-page-container">
             {{ content }}
diff --git a/doc-tool/resources/css/api-page.css b/doc-tool/resources/css/api-page.css
index bb5b1d180589..cdebde1bf042 100644
--- a/doc-tool/resources/css/api-page.css
+++ b/doc-tool/resources/css/api-page.css
@@ -165,3 +165,21 @@ div.entity-section > div.member > div.member-body > div.member-body-long.toggled
 div.entity-section.toggled {
     display: none;
 }
+
+@media screen and (max-width: 576px) {
+    a#edit-on-github {
+        position: static !important;
+    }
+}
+
+@media screen and (min-width: 576px) and (max-width: 899px) {
+    a#edit-on-github {
+        right: 10px !important;
+    }
+}
+
+@media screen and (min-width: 899px) and (max-width: 1046px) {
+    a#edit-on-github {
+        position: static !important;
+    }
+}
diff --git a/doc-tool/resources/css/sidebar.css b/doc-tool/resources/css/sidebar.css
index 79322a329e28..d00a75e17ab3 100644
--- a/doc-tool/resources/css/sidebar.css
+++ b/doc-tool/resources/css/sidebar.css
@@ -235,7 +235,7 @@ div#cover-block {
 }
 
 /** Tablet (576px <= x < 768px) sidebar: Defaults closed with 250px wide sidebar */
-@media screen and (min-width: 576px) and (max-width: 899px) {
+@media screen and (max-width: 899px) {
     div#content-wrapper {}
     div#content-wrapper div#content-body {}
     div#content-wrapper div#content-body.doc-page-body { padding-right: 0; }