diff --git a/browser/devtools/inspector/inspector.xul b/browser/devtools/inspector/inspector.xul
index 1008b920c3d..130f1b75bbb 100644
--- a/browser/devtools/inspector/inspector.xul
+++ b/browser/devtools/inspector/inspector.xul
@@ -63,7 +63,7 @@
     </menupopup>
   </popupset>
 
-  <hbox flex="1">
+  <box flex="1" class="devtools-responsive-container">
     <vbox flex="1">
       <toolbar id="inspector-toolbar"
         class="devtools-toolbar"
@@ -91,5 +91,5 @@
       <tabs/>
       <tabpanels flex="1"/>
     </tabbox>
-  </hbox>
+  </box>
 </window>
diff --git a/browser/devtools/netmonitor/netmonitor.css b/browser/devtools/netmonitor/netmonitor.css
index 8050531eb5d..75d14f856ad 100644
--- a/browser/devtools/netmonitor/netmonitor.css
+++ b/browser/devtools/netmonitor/netmonitor.css
@@ -6,3 +6,11 @@
 #response-content-image-box {
   overflow: auto;
 }
+
+/* Responsive sidebar */
+@media (max-width: 700px) {
+  #details-pane-toggle,
+  .requests-menu-waterfall {
+    display: none;
+  }
+}
diff --git a/browser/devtools/netmonitor/netmonitor.xul b/browser/devtools/netmonitor/netmonitor.xul
index aaf28d6d877..88db6a46e34 100644
--- a/browser/devtools/netmonitor/netmonitor.xul
+++ b/browser/devtools/netmonitor/netmonitor.xul
@@ -17,7 +17,7 @@
   <script type="text/javascript" src="netmonitor-controller.js"/>
   <script type="text/javascript" src="netmonitor-view.js"/>
 
-  <hbox id="body" flex="1">
+  <box id="body" flex="1" class="devtools-responsive-container">
     <vbox id="network-table" flex="1">
       <toolbar id="requests-menu-toolbar"
                class="devtools-toolbar"
@@ -262,6 +262,6 @@
         </tabpanel>
       </tabpanels>
     </tabbox>
-  </hbox>
+  </box>
 
 </window>
diff --git a/browser/devtools/webconsole/webconsole.xul b/browser/devtools/webconsole/webconsole.xul
index 2f747198baf..6aaf75ad18e 100644
--- a/browser/devtools/webconsole/webconsole.xul
+++ b/browser/devtools/webconsole/webconsole.xul
@@ -67,7 +67,7 @@
     </menupopup>
   </popupset>
 
-  <hbox class="hud-outer-wrapper" flex="1">
+  <box class="hud-outer-wrapper devtools-responsive-container" flex="1">
     <vbox class="hud-console-wrapper" flex="1">
       <toolbar class="hud-console-filter-toolbar devtools-toolbar" mode="full">
         <toolbarbutton label="&btnPageNet.label;" type="menu-button"
@@ -145,5 +145,5 @@
       <tabs/>
       <tabpanels flex="1"/>
     </tabbox>
-  </hbox>
+  </box>
 </window>
diff --git a/browser/themes/linux/devtools/common.css b/browser/themes/linux/devtools/common.css
index e65b4f0a8f7..336e2c54362 100644
--- a/browser/themes/linux/devtools/common.css
+++ b/browser/themes/linux/devtools/common.css
@@ -216,6 +216,7 @@
   background-color: transparent;
   -moz-margin-end: -3px;
   position: relative;
+  cursor: e-resize;
 }
 
 /* In-tools sidebar */
diff --git a/browser/themes/linux/devtools/netmonitor.css b/browser/themes/linux/devtools/netmonitor.css
index f94b6e6d793..56925dfcd72 100644
--- a/browser/themes/linux/devtools/netmonitor.css
+++ b/browser/themes/linux/devtools/netmonitor.css
@@ -297,3 +297,19 @@
 #timings-tabpanel .requests-menu-timings-total {
   transition: transform 0.2s ease-out;
 }
+
+/* Responsive sidebar */
+@media (max-width: 700px) {
+  #details-pane {
+    max-width: none;
+    margin: 0 !important;
+    /* To prevent all the margin hacks to hide the sidebar */
+  }
+
+  .requests-menu-size {
+    border-width: 0px !important;
+    box-shadow: none !important;
+    /* !important are required here because Timeline is not visible and thus
+       the right border and box-shadow of Size column should be hidden */
+  }
+}
diff --git a/browser/themes/osx/devtools/common.css b/browser/themes/osx/devtools/common.css
index bd2be535ce2..e7b29c118f9 100644
--- a/browser/themes/osx/devtools/common.css
+++ b/browser/themes/osx/devtools/common.css
@@ -230,6 +230,7 @@
   width: 3px;
   -moz-margin-end: -3px;
   position: relative;
+  cursor: e-resize;
 }
 
 /* In-tools sidebar */
diff --git a/browser/themes/osx/devtools/netmonitor.css b/browser/themes/osx/devtools/netmonitor.css
index d1f1c24f39a..270fc5cf9b4 100644
--- a/browser/themes/osx/devtools/netmonitor.css
+++ b/browser/themes/osx/devtools/netmonitor.css
@@ -297,3 +297,19 @@
 #timings-tabpanel .requests-menu-timings-total {
   transition: transform 0.2s ease-out;
 }
+
+/* Responsive sidebar */
+@media (max-width: 700px) {
+  #details-pane {
+    max-width: none;
+    margin: 0 !important;
+    /* To prevent all the margin hacks to hide the sidebar */
+  }
+
+  .requests-menu-size {
+    border-width: 0px !important;
+    box-shadow: none !important;
+    /* !important are required here because Timeline is not visible and thus
+       the right border and box-shadow of Size column should be hidden */
+  }
+}
diff --git a/browser/themes/shared/devtools/common.inc.css b/browser/themes/shared/devtools/common.inc.css
index c9ae98d9ca3..268164e01c0 100644
--- a/browser/themes/shared/devtools/common.inc.css
+++ b/browser/themes/shared/devtools/common.inc.css
@@ -83,3 +83,31 @@
 .devtools-autocomplete-listbox.light-theme > richlistitem > label {
   color: #666;
 }
+
+/* Responsive container */
+
+.devtools-responsive-container {
+  -moz-box-orient: horizontal;
+}
+
+@media (max-width: 700px) {
+  .devtools-responsive-container {
+    -moz-box-orient: vertical;
+  }
+
+  .devtools-responsive-container > .devtools-side-splitter {
+    border: 0;
+    margin: 0;
+    border-top: 1px solid black;
+    min-height: 3px;
+    height: 3px;
+    margin-bottom: -3px;
+    /* In some edge case the cursor is not changed to n-resize */
+    cursor: n-resize;
+  }
+
+  .devtools-responsive-container > .devtools-sidebar-tabs {
+    min-height: 35vh;
+    max-height: 75vh;
+  }
+}
diff --git a/browser/themes/windows/devtools/common.css b/browser/themes/windows/devtools/common.css
index 2bb1fd1070f..0bc24fd4c27 100644
--- a/browser/themes/windows/devtools/common.css
+++ b/browser/themes/windows/devtools/common.css
@@ -236,6 +236,7 @@
   background-color: transparent;
   -moz-margin-end: -3px;
   position: relative;
+  cursor: e-resize;
 }
 
 /* In-tools sidebar */
diff --git a/browser/themes/windows/devtools/netmonitor.css b/browser/themes/windows/devtools/netmonitor.css
index d1f1c24f39a..270fc5cf9b4 100644
--- a/browser/themes/windows/devtools/netmonitor.css
+++ b/browser/themes/windows/devtools/netmonitor.css
@@ -297,3 +297,19 @@
 #timings-tabpanel .requests-menu-timings-total {
   transition: transform 0.2s ease-out;
 }
+
+/* Responsive sidebar */
+@media (max-width: 700px) {
+  #details-pane {
+    max-width: none;
+    margin: 0 !important;
+    /* To prevent all the margin hacks to hide the sidebar */
+  }
+
+  .requests-menu-size {
+    border-width: 0px !important;
+    box-shadow: none !important;
+    /* !important are required here because Timeline is not visible and thus
+       the right border and box-shadow of Size column should be hidden */
+  }
+}