resources/assets/sass/_helpers.scss

@@ -30,7 +30,8 @@
 	cursor: pointer;
 }
 
-.noscript-hide {
+.noscript-hide,
+#mainNavContent.noscript-hide { // hack to circumvent bootstrap’s very liberal use of !important
 	display: none !important;
 }
 

resources/assets/sass/bootstrap-customizations/_responsive.scss

@@ -7,3 +7,31 @@
 		border: 0 none !important;
 	}
 }
+
+@media (min-width: 769px) and (max-width: 991px) {
+    #table-infobox {
+        flex-direction: column-reverse;
+    }
+    #infobox-tabContent,
+    #infobox-tab-container {
+        max-width: 100%;
+    }
+    #infobox-tab {
+        flex-direction: row !important;
+    }
+}
+@media (max-width: 991px) {
+    #table-infobox {
+        border-left: none !important;
+    }
+    #table-title-container {
+        flex-wrap: wrap;
+        justify-content: space-between;
+    }
+    #table-id {
+        width: 100%;
+    }
+    #table-title {
+        margin-left: 0 !important;
+    }
+}

resources/views/layouts/main-nav.blade.php

@@ -23,8 +23,7 @@
       <span class="navbar-toggler-icon"></span>
     </button>
 
-    <div class="noscript-hide">
-      <div class="collapse navbar-collapse" id="mainNavContent">
+    <div class="collapse navbar-collapse noscript-hide" id="mainNavContent">
       <ul class="navbar-nav ml-auto">
         <!-- Authentication Links -->
         @guest()
@@ -50,7 +49,6 @@
         @endif
       </ul>
     </div>
-    </div>
 
     <noscript>
       @sr(Menu for users without JavaScript)

resources/views/table/view.blade.php

@@ -8,20 +8,20 @@
 
 @section('content')
 <div class="row justify-content-start px-3">
-  <div class="d-flex w-100 align-items-center">
-    <small class="flex-grow-1" style="font-size: 120%;">
+  <div class="d-flex w-100 align-items-center" id="table-title-container">
+    <small class="flex-grow-1" style="font-size: 120%;" id="table-id">
       <a href="{{route('profile.view', $table->owner->name)}}" class="link-no-color">{{ $table->owner->handle }}</a>{{--
       --}}<span class="px-1">/</span>{{--
       --}}<b>{{ $table->name }}</b>
     </small>
 
-    <h1 class="mx-3">{{ $table->title }}</h1>
+    <h1 class="mx-3" id="table-title">{{ $table->title }}</h1>
 
     @include('table._view-action-buttons')
   </div>
 </div>
 
-<div class="row col-md-12 infobox">
+<div class="row col-md-12 infobox" id="table-infobox">
 
   {{-- Tab panels wrapper --}}
   <div class="col-md-10 tab-content order-1" id="infobox-tabContent">
@@ -41,7 +41,7 @@
   </div>{{-- End of tab panels wrapper --}}
 
   {{-- Right column with menu --}}
-  <div class="col-md-2 border-left order-md-2 order-0 mb-md-0 mb-2">
+  <div class="col-md-2 border-left order-md-2 order-0 mb-md-0 mb-2" id="infobox-tab-container">
     <div class="nav flex-md-column flex-row nav-pills pt-1 pb-1" role="tablist"
          aria-label="Tabs for the table info box" id="infobox-tab">