diff --git a/dist/app.css b/dist/app.css
index 4c84516..2233d1e 100644
--- a/dist/app.css
+++ b/dist/app.css
@@ -12185,8 +12185,10 @@ section.side-by-side-text h2, section.side-by-side-text .h2 {
   color: #063C5A;
   max-width: 595px;
 }
-section.side-by-side-text .right > * {
-  padding-left: 6rem;
+@media (min-width: 768px) {
+  section.side-by-side-text .right > * {
+    padding-left: 6rem;
+  }
 }
 
 .text-over-image-a {
diff --git a/dist/mix-manifest.json b/dist/mix-manifest.json
index c512912..aa63095 100644
--- a/dist/mix-manifest.json
+++ b/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"
 }
diff --git a/src/scss/flex-side-by-side.scss b/src/scss/flex-side-by-side.scss
index 9b52561..becc3ed 100644
--- a/src/scss/flex-side-by-side.scss
+++ b/src/scss/flex-side-by-side.scss
@@ -10,7 +10,9 @@ section.side-by-side-text {
 
     .right {
         & > * {
-            padding-left: 6rem;
+            @include media-breakpoint-up(md) {
+                padding-left: 6rem;
+            }
         }
     }
 }
diff --git a/tpl/flex_side_by_side_text.tpl b/tpl/flex_side_by_side_text.tpl
index a5eeea6..76c039f 100644
--- a/tpl/flex_side_by_side_text.tpl
+++ b/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>