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,33 +23,31 @@
       <span class="navbar-toggler-icon"></span>
     </button>
 
-    <div class="noscript-hide">
+    <div class="collapse navbar-collapse noscript-hide" id="mainNavContent">
-      <div class="collapse navbar-collapse" id="mainNavContent">
+      <ul class="navbar-nav ml-auto">
-        <ul class="navbar-nav ml-auto">
+        <!-- Authentication Links -->
-          <!-- Authentication Links -->
+        @guest()
-          @guest()
+          @include('layouts.guest-buttons')
-            @include('layouts.guest-buttons')
+        @else
-          @else
+          {{-- Logged in --}}
-            {{-- Logged in --}}
+          @include('layouts.nav-buttons', ['dropdown' => false])
-            @include('layouts.nav-buttons', ['dropdown' => false])
+          <li class="nav-item dropdown no-mobile">
-            <li class="nav-item dropdown no-mobile">
+            <a id="mainNavDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown"
-              <a id="mainNavDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown"
+               aria-haspopup="true" aria-expanded="false" v-pre>
-                 aria-haspopup="true" aria-expanded="false" v-pre>
+              @icon(fa-user-circle-o fa-pr){{--
-                @icon(fa-user-circle-o fa-pr){{--
+              --}}{{ user()->title }} <span class="caret"></span>
-                --}}{{ user()->title }} <span class="caret"></span>
+            </a>
-              </a>
 
-              <div class="dropdown-menu dropdown-menu-right" aria-labelledby="mainNavDropdown">
+            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="mainNavDropdown">
-                @include('layouts.nav-buttons', ['dropdown' => true])
+              @include('layouts.nav-buttons', ['dropdown' => true])
-              </div>
+            </div>
 
-              <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
+            <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
-                @csrf
+              @csrf
-              </form>
+            </form>
-            </li>
+          </li>
-          @endif
+        @endif
-        </ul>
+      </ul>
-      </div>
     </div>
 
     <noscript>

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">
+  <div class="d-flex w-100 align-items-center" id="table-title-container">
-    <small class="flex-grow-1" style="font-size: 120%;">
+    <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">