WIP

dist/app.css

@@ -12186,6 +12186,11 @@ section.side-by-side-text h2, section.side-by-side-text .h2 {
   max-width: 595px;
 }
 @media (min-width: 768px) {
+  section.side-by-side-text .right > * {
+    padding-left: 3rem;
+  }
+}
+@media (min-width: 992px) {
   section.side-by-side-text .right > * {
     padding-left: 6rem;
   }

dist/mix-manifest.json

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

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

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

tpl/flex_3_column_callouts.tpl

@@ -1,5 +1,5 @@
 <section class="flex_3_column_callouts">
-    <div class="d-flex">
+    <div class="d-flex flex-column flex-lg-row">
         {{#each callouts}}
             <div class="callout">
                 <div class="image-wrapper">