diff --git a/rest_framework/static/rest_framework/docs/css/base.css b/rest_framework/static/rest_framework/docs/css/base.css
index ad19b1daf..330aab940 100644
--- a/rest_framework/static/rest_framework/docs/css/base.css
+++ b/rest_framework/static/rest_framework/docs/css/base.css
@@ -129,58 +129,6 @@
   transition: all 1s ease;
 }
 
-@media (max-width: 767px) {
-  .main-container {
-    padding-left: 15px;
-    padding-right: 15px;
-  }
-
-  .sidebar {
-    position: relative;
-    width: 100%;
-    margin-bottom: 10px;
-  }
-
-  .sidebar .toggle-btn {
-    display: block;
-    cursor: pointer;
-    position: absolute;
-    right: 10px;
-    top: 10px;
-    z-index: 10 !important;
-    padding: 3px;
-    width: 40px;
-    text-align: center;
-  }
-
-  .sidebar .language-switcher {
-    text-align: center;
-    margin-top: 10px;
-    margin-bottom: 10px;
-  }
-
-  .sidebar .brand {
-    margin-top: 0;
-    margin-bottom: 0;
-
-    text-align: left !important;
-    font-size: 22px;
-    padding: 0;
-    padding-left: 20px;
-    line-height: 50px !important;
-  }
-}
-
-@media (min-width: 767px) {
-  .sidebar .menu-list .menu-content {
-    display: block;
-  }
-  #main {
-    width:calc(100% - 225px);
-    float: right;
-  }
-}
-
 body {
   margin: 0px;
   padding: 0px;
@@ -219,6 +167,11 @@ body {
     text-align: center;
     margin-top: 20px;
     margin-bottom: 20px;
+
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
 }
 
 .sidebar .language-switcher h6 {
@@ -230,8 +183,7 @@ body {
 }
 
 .sidebar .language-switcher .dropdown-menu {
-  margin-top: 5px;
-  margin-bottom: 20px;
+  margin-bottom: 5px;
   border: 0;
   border-radius: 0;
   min-width: 130px;
@@ -279,3 +231,69 @@ body {
 }
 
 /* @end Docs Content */
+
+
+@media (max-width: 767px) {
+  .main-container {
+    padding-left: 15px;
+    padding-right: 15px;
+  }
+
+  .sidebar {
+    position: relative;
+    width: 100%;
+    margin-bottom: 10px;
+    overflow: visible;
+  }
+
+  .sidebar .toggle-btn {
+    display: block;
+    cursor: pointer;
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    z-index: 10 !important;
+    padding: 3px;
+    width: 40px;
+    text-align: center;
+  }
+
+  .sidebar .language-switcher {
+    text-align: center;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    position: static;
+  }
+
+  .sidebar .language-switcher .btn .caret {
+    margin-left: 0;
+    border-bottom: 0;
+    border-top: 4px dashed;
+  }
+
+  .sidebar .language-switcher .dropup .dropdown-menu {
+    top: 30px;
+    bottom: inherit;
+  }
+
+  .sidebar .brand {
+    margin-top: 0;
+    margin-bottom: 0;
+
+    text-align: left !important;
+    font-size: 22px;
+    padding: 0;
+    padding-left: 20px;
+    line-height: 50px !important;
+  }
+}
+
+@media (min-width: 767px) {
+  .sidebar .menu-list .menu-content {
+    display: block;
+  }
+  #main {
+    width:calc(100% - 225px);
+    float: right;
+  }
+}
diff --git a/rest_framework/templates/rest_framework/docs/interact.html b/rest_framework/templates/rest_framework/docs/interact.html
new file mode 100644
index 000000000..6bc67c1cd
--- /dev/null
+++ b/rest_framework/templates/rest_framework/docs/interact.html
@@ -0,0 +1,28 @@
+{% load rest_framework %}
+
+<!-- Modal -->
+<div class="modal fade api-modal" id="{{ section_key }}_{{ link_key }}_modal" tabindex="-1" role="dialog" aria-labelledby="api explorer modal">
+<div class="modal-dialog modal-lg" role="document">
+  <div class="modal-content">
+    <div class="modal-header">
+      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+      <h4 class="modal-title">{{ link.title|default:link_key }}</h4>
+    </div>
+
+    <div class="modal-body">
+        <form data-key='["{{ section_key }}", "{{ link_key }}"]'>
+            {% form_for_link link %}
+
+            <div id="response">
+                <div class="response-error alert alert-danger hide"></div>
+                <pre class="response-data hide"></pre>
+            </div>
+
+            <div class="text-right">
+                <button type="submit" class="btn btn-primary">Submit</button>
+            </div>
+        </form>
+    </div>
+  </div>
+</div>
+</div>
diff --git a/rest_framework/templates/rest_framework/docs/link.html b/rest_framework/templates/rest_framework/docs/link.html
index 0476e3f8e..2b6d94a86 100644
--- a/rest_framework/templates/rest_framework/docs/link.html
+++ b/rest_framework/templates/rest_framework/docs/link.html
@@ -99,30 +99,4 @@
     </div>
 </div>
 
-<!-- Modal -->
-<div class="modal fade api-modal" id="{{ section_key }}_{{ link_key }}_modal" tabindex="-1" role="dialog" aria-labelledby="api explorer modal">
-<div class="modal-dialog modal-lg" role="document">
-  <div class="modal-content">
-    <div class="modal-header">
-      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-      <h4 class="modal-title">{{ link.title|default:link_key }}</h4>
-    </div>
-
-    <div class="modal-body">
-        <form data-key='["{{ section_key }}", "{{ link_key }}"]'>
-            {% form_for_link link %}
-
-            <div id="response">
-                <div class="response-error alert alert-danger hide"></div>
-                <pre class="response-data hide"></pre>
-            </div>
-
-            <div class="text-right">
-                <button type="submit" class="btn btn-primary">Submit</button>
-            </div>
-        </form>
-    </div>
-
-  </div>
-</div>
-</div>
+{% include "rest_framework/docs/interact.html" with link=link schema=schema %}
diff --git a/rest_framework/templates/rest_framework/docs/sidebar.html b/rest_framework/templates/rest_framework/docs/sidebar.html
index a672c581f..313ae7cb4 100644
--- a/rest_framework/templates/rest_framework/docs/sidebar.html
+++ b/rest_framework/templates/rest_framework/docs/sidebar.html
@@ -18,7 +18,7 @@
 
         <div class="language-switcher">
             <h6>Choose Language</h6>
-            <div class="btn-group">
+            <div class="btn-group dropup">
               <button type="button" class="btn btn-info btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                 <span>shell</span> &nbsp;&nbsp;<span class="caret"></span>
               </button>