WIP

dist/app.css

@@ -12099,6 +12099,13 @@ a {
   width: 80%;
   max-width: 358px;
 }
+@media (max-width: 767.98px) {
+  .top-nav .logo-wrapper {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+  }
+}
 .top-nav nav.main-nav > div {
   height: 100%;
 }

dist/mix-manifest.json

@@ -1,4 +1,4 @@
 {
     "/app.js": "/app.js?id=e87e05bd26822b1fc6dae092decfb838",
-    "/app.css": "/app.css?id=c7f474ec52cfd3adc0c0bc6fab2984b0"
+    "/app.css": "/app.css?id=b0a787eafff9fde54128004303799552"
 }

src/scss/header.scss

@@ -4,6 +4,12 @@
     .logo-wrapper {
         width: 80%;
         max-width: 358px;
+
+        @include media-breakpoint-down(md) {
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+        }
     }
 
     nav.main-nav {

tpl/header.tpl

@@ -17,7 +17,7 @@
     <div class="container">
         <div class="row">
             <div class="col">
-                <div class="d-flex justify-content-between">
+                <div class="d-flex justify-content-between flex-column flex-lg-row">
                     <div class="logo-wrapper">
                         <a href="/"><img src="{{ logo }}" alt="{{#wp-title}}" /></a>