WIP

dist/app.css

@@ -12185,9 +12185,11 @@ section.side-by-side-text h2, section.side-by-side-text .h2 {
   color: #063C5A;
   max-width: 595px;
 }
+@media (min-width: 768px) {
   section.side-by-side-text .right > * {
     padding-left: 6rem;
   }
+}
 
 .text-over-image-a {
   background-position: center;

dist/mix-manifest.json

@@ -1,4 +1,4 @@
 {
     "/app.js": "/app.js?id=e87e05bd26822b1fc6dae092decfb838",
-    "/app.css": "/app.css?id=be3212f158a737dabc69989e0b8a6782"
+    "/app.css": "/app.css?id=3df98911b576384a8ce51bb29cb95129"
 }

src/scss/flex-side-by-side.scss

@@ -10,7 +10,9 @@ section.side-by-side-text {
 
     .right {
         & > * {
+            @include media-breakpoint-up(md) {
                 padding-left: 6rem;
             }
         }
     }
+}

tpl/flex_side_by_side_text.tpl

@@ -1,11 +1,11 @@
 <section class="side-by-side-text">
     <div class="container">
         <div class="row">
-            <div class="col left">
+            <div class="col-12 col-md-6 left">
                 <h2 class="watch-vp">{{ large_headline }}</h2>
             </div>
 
-            <div class="col right watch-vp">
+            <div class="col-12 col-md-6 right watch-vp">
                 {{{ content }}}
             </div>
         </div>