diff --git a/core/modules/layout_discovery/layouts/onecol/layout--onecol.html.twig b/core/modules/layout_discovery/layouts/onecol/layout--onecol.html.twig
index eb553cd..fd4c648 100644
--- a/core/modules/layout_discovery/layouts/onecol/layout--onecol.html.twig
+++ b/core/modules/layout_discovery/layouts/onecol/layout--onecol.html.twig
@@ -11,14 +11,14 @@
  */
 #}
 {%
-set classes = [
-'layout--onecol',
-]
+  set classes = [
+    'layout--onecol',
+  ]
 %}
 {% if content %}
-<div{{ attributes.addClass(classes) }}>
-  <div class="layout-region layout-region--content">
-    {{ content.content }}
+  <div{{ attributes.addClass(classes) }}>
+    <div class="layout-region layout-region--content">
+      {{ content.content }}
+    </div>
   </div>
-</div>
 {% endif %}
diff --git a/core/modules/layout_discovery/layouts/threecol_25_50_25/layout--threecol-25-50-25.html.twig b/core/modules/layout_discovery/layouts/threecol_25_50_25/layout--threecol-25-50-25.html.twig
index 78db2b4..d87d829 100644
--- a/core/modules/layout_discovery/layouts/threecol_25_50_25/layout--threecol-25-50-25.html.twig
+++ b/core/modules/layout_discovery/layouts/threecol_25_50_25/layout--threecol-25-50-25.html.twig
@@ -14,34 +14,34 @@
  */
 #}
 {%
-set classes = [
-'layout--threecol',
-]
+  set classes = [
+    'layout--threecol',
+  ]
 %}
 {% if content %}
-<div{{ attributes.addClass(classes) }}>
-  {% if content.top %}
-    <div class="layout-region layout-region--fullwidth">
-      {{ content.top }}
+  <div{{ attributes.addClass(classes) }}>
+    {% if content.top %}
+      <div class="layout-region layout-region--top layout-region--fullwidth">
+        {{ content.top }}
+      </div>
+    {% endif %}
+
+    <div class="layout-region layout-region--left">
+      {{ content.left }}
     </div>
-  {% endif %}
 
-  <div class="layout-region layout-region--side">
-    {{ content.left }}
-  </div>
+    <div class="layout-region layout-region--middle">
+      {{ content.middle }}
+    </div>
 
-  <div class="layout-region layout-region--middle">
-    {{ content.middle }}
-  </div>
+    <div class="layout-region layout-region--right">
+      {{ content.right }}
+    </div>
 
-  <div class="layout-region layout-region--side">
-    {{ content.right }}
+    {% if content.bottom %}
+      <div class="layout-region layout-region--bottom layout-region--fullwidth">
+        {{ content.bottom }}
+      </div>
+    {% endif %}
   </div>
-
-  {% if content.bottom %}
-    <div class="layout-region layout-region--fullwidth">
-      {{ content.bottom }}
-    </div>
-  {% endif %}
-</div>
 {% endif %}
diff --git a/core/modules/layout_discovery/layouts/threecol_25_50_25/threecol_25_50_25.css b/core/modules/layout_discovery/layouts/threecol_25_50_25/threecol_25_50_25.css
index 7472d55..be61821 100644
--- a/core/modules/layout_discovery/layouts/threecol_25_50_25/threecol_25_50_25.css
+++ b/core/modules/layout_discovery/layouts/threecol_25_50_25/threecol_25_50_25.css
@@ -8,10 +8,17 @@
   flex: 0 1 25%;
 }
 
-.layout--threecol > .layout-region--fullwidth {
-  flex: 0 1 100%;
-}
-
 .layout--threecol > .layout-region--middle {
   flex: 0 1 50%;
 }
+
+@media screen and (max-width: 40em) {
+  .layout--threecol > .layout-region,
+  .layout--threecol > .layout-region--middle {
+    flex: 0 1 100%;
+  }
+}
+
+.layout--threecol > .layout-region--fullwidth {
+  flex: 0 1 100%;
+}
diff --git a/core/modules/layout_discovery/layouts/threecol_33_34_33/layout--threecol-33-34-33.html.twig b/core/modules/layout_discovery/layouts/threecol_33_34_33/layout--threecol-33-34-33.html.twig
index 59461f4..0501351 100644
--- a/core/modules/layout_discovery/layouts/threecol_33_34_33/layout--threecol-33-34-33.html.twig
+++ b/core/modules/layout_discovery/layouts/threecol_33_34_33/layout--threecol-33-34-33.html.twig
@@ -14,34 +14,34 @@
  */
 #}
 {%
-set classes = [
-'layout--threecol-33',
-]
+  set classes = [
+    'layout--threecol-33',
+  ]
 %}
 {% if content %}
-<div{{ attributes.addClass(classes) }}>
-  {% if content.top %}
-  <div class="layout-region layout-region--fullwidth">
-    {{ content.top }}
-  </div>
-  {% endif %}
+  <div{{ attributes.addClass(classes) }}>
+    {% if content.top %}
+      <div class="layout-region layout-region--top layout-region--fullwidth">
+        {{ content.top }}
+      </div>
+    {% endif %}
 
-  <div class="layout-region">
-    {{ content.left }}
-  </div>
+    <div class="layout-region layout-region--left">
+      {{ content.left }}
+    </div>
 
-  <div class="layout-region">
-    {{ content.middle }}
-  </div>
+    <div class="layout-region layout-region--middle">
+      {{ content.middle }}
+    </div>
 
-  <div class="layout-region">
-    {{ content.right }}
-  </div>
+    <div class="layout-region layout-region--right">
+      {{ content.right }}
+    </div>
 
-  {% if content.bottom %}
-  <div class="layout-region layout-region--fullwidth">
-    {{ content.bottom }}
+    {% if content.bottom %}
+      <div class="layout-region layout-region--bottom layout-region--fullwidth">
+        {{ content.bottom }}
+      </div>
+    {% endif %}
   </div>
-  {% endif %}
-</div>
 {% endif %}
diff --git a/core/modules/layout_discovery/layouts/threecol_33_34_33/threecol_33_34_33.css b/core/modules/layout_discovery/layouts/threecol_33_34_33/threecol_33_34_33.css
index 7091416..7acb3cc 100644
--- a/core/modules/layout_discovery/layouts/threecol_33_34_33/threecol_33_34_33.css
+++ b/core/modules/layout_discovery/layouts/threecol_33_34_33/threecol_33_34_33.css
@@ -8,6 +8,12 @@
   flex: 0 1 33%;
 }
 
+@media screen and (max-width: 40em) {
+  .layout--threecol > .layout-region {
+    flex: 0 1 100%;
+  }
+}
+
 .layout--threecol-33 > .layout-region--fullwidth {
   flex: 0 1 100%;
 }
diff --git a/core/modules/layout_discovery/layouts/twocol/layout--twocol.html.twig b/core/modules/layout_discovery/layouts/twocol/layout--twocol.html.twig
index efebf0f..efe6801 100644
--- a/core/modules/layout_discovery/layouts/twocol/layout--twocol.html.twig
+++ b/core/modules/layout_discovery/layouts/twocol/layout--twocol.html.twig
@@ -11,15 +11,17 @@
  */
 #}
 {%
-set classes = [
-'layout--twocol',
-]
+  set classes = [
+    'layout--twocol',
+  ]
 %}
 {% if content %}
   <div{{ attributes.addClass(classes) }}>
-    <div class="layout-region layout-region--fullwidth">
-      {{ content.top }}
-    </div>
+    {% if content.top %}
+      <div class="layout-region layout-region--top layout-region--fullwidth">
+        {{ content.top }}
+      </div>
+    {% endif %}
 
     <div class="layout-region layout-region--left">
       {{ content.left }}
@@ -29,8 +31,10 @@ set classes = [
       {{ content.right }}
     </div>
 
-    <div class="layout-region layout-region--fullwidth">
-      {{ content.bottom }}
-    </div>
+    {% if content.bottom %}
+      <div class="layout-region layout-region--bottom layout-region--fullwidth">
+        {{ content.bottom }}
+      </div>
+    {% endif %}
   </div>
 {% endif %}
diff --git a/core/modules/layout_discovery/layouts/twocol/twocol.css b/core/modules/layout_discovery/layouts/twocol/twocol.css
index 41e8883..b845258 100644
--- a/core/modules/layout_discovery/layouts/twocol/twocol.css
+++ b/core/modules/layout_discovery/layouts/twocol/twocol.css
@@ -8,6 +8,12 @@
   flex: 0 1 50%;
 }
 
+@media screen and (max-width: 40em) {
+  .layout--twocol > .layout-region {
+    flex: 0 1 100%;
+  }
+}
+
 .layout--twocol > .layout-region--fullwidth {
   flex: 0 1 100%;
 }
diff --git a/core/modules/layout_discovery/layouts/twocol_bricks/layout--twocol-bricks.html.twig b/core/modules/layout_discovery/layouts/twocol_bricks/layout--twocol-bricks.html.twig
index 9c6231b..d96bf5e 100644
--- a/core/modules/layout_discovery/layouts/twocol_bricks/layout--twocol-bricks.html.twig
+++ b/core/modules/layout_discovery/layouts/twocol_bricks/layout--twocol-bricks.html.twig
@@ -14,38 +14,42 @@
  */
 #}
 {%
-set classes = [
-'layout--twocol-bricks',
-]
+  set classes = [
+    'layout--twocol-bricks',
+  ]
 %}
 {% if content %}
-<div{{ attributes.addClass(classes) }}>
-  <div class="layout-region layout-region--fullwidth">
-    {{ content.top }}
-  </div>
+  <div{{ attributes.addClass(classes) }}>
+    {% if content.top %}
+      <div class="layout-region layout-region--top layout-region--fullwidth">
+        {{ content.top }}
+      </div>
+    {% endif %}
 
-  <div class="layout-region layout-region--left_above">
-    {{ content.left_above }}
-  </div>
+    <div class="layout-region layout-region--left-above">
+      {{ content.left_above }}
+    </div>
 
-  <div class="layout-region layout-region--right_above">
-    {{ content.right_above }}
-  </div>
+    <div class="layout-region layout-region--right-above">
+      {{ content.right_above }}
+    </div>
 
-  <div class="layout-region layout-region--middle">
-    {{ content.middle }}
-  </div>
+    <div class="layout-region layout-region--middle layout-region--fullwidth">
+      {{ content.middle }}
+    </div>
 
-  <div class="layout-region layout-region--left_below">
-    {{ content.left_below }}
-  </div>
+    <div class="layout-region layout-region--left-below">
+      {{ content.left_below }}
+    </div>
 
-  <div class="layout-region layout-region--right_below">
-    {{ content.right_below }}
-  </div>
+    <div class="layout-region layout-region--right-below">
+      {{ content.right_below }}
+    </div>
 
-  <div class="layout-region layout-region--fullwidth">
-    {{ content.bottom }}
+    {% if content.bottom %}
+      <div class="layout-region layout-region--bottom layout-region--fullwidth">
+        {{ content.bottom }}
+      </div>
+    {% endif %}
   </div>
-</div>
 {% endif %}
diff --git a/core/modules/layout_discovery/layouts/twocol_bricks/twocol_bricks.css b/core/modules/layout_discovery/layouts/twocol_bricks/twocol_bricks.css
index aef887a..a52e371 100644
--- a/core/modules/layout_discovery/layouts/twocol_bricks/twocol_bricks.css
+++ b/core/modules/layout_discovery/layouts/twocol_bricks/twocol_bricks.css
@@ -8,6 +8,12 @@
   flex: 0 1 50%;
 }
 
+@media screen and (max-width: 40em) {
+  .layout--twocol-bricks > .layout-region {
+    flex: 0 1 100%;
+  }
+}
+
 .layout--twocol-bricks > .layout-region--fullwidth {
   flex: 0 1 100%;
 }
diff --git a/core/modules/layout_discovery/templates/layout.html.twig b/core/modules/layout_discovery/templates/layout.html.twig
index 88ea745..5aa58b1 100644
--- a/core/modules/layout_discovery/templates/layout.html.twig
+++ b/core/modules/layout_discovery/templates/layout.html.twig
@@ -4,15 +4,17 @@
  * Template for a generic layout.
  */
 #}
-{% set classes = [
-  'layout--' ~ layout.id|clean_class,
-] %}
+{%
+  set classes = [
+    'layout--' ~ layout.id|clean_class,
+  ]
+%}
 {% if content %}
-<div{{ attributes.addClass(classes) }}>
-{% for region in layout.getRegionNames %}
-  <div class="{{ 'region--' ~ region|clean_class }}">
-    {{ content[region] }}
+  <div{{ attributes.addClass(classes) }}>
+  {% for region in layout.getRegionNames %}
+    <div class="{{ 'region--' ~ region|clean_class }}">
+      {{ content[region] }}
+    </div>
+  {% endfor %}
   </div>
-{% endfor %}
-</div>
 {% endif %}
diff --git a/core/modules/layout_discovery/tests/src/Kernel/LayoutTest.php b/core/modules/layout_discovery/tests/src/Kernel/LayoutTest.php
index 9d4c446..cf60eac 100644
--- a/core/modules/layout_discovery/tests/src/Kernel/LayoutTest.php
+++ b/core/modules/layout_discovery/tests/src/Kernel/LayoutTest.php
@@ -135,11 +135,11 @@ public function renderLayoutData() {
     ];
 
     $data['layout_onecol'][] = <<<'EOD'
-<div data-drupal-selector="edit-layout" class="layout--onecol">
-  <div class="layout-region layout-region--content">
-    This is the content
+  <div data-drupal-selector="edit-layout" class="layout--onecol">
+    <div class="layout-region layout-region--content">
+      This is the content
+    </div>
   </div>
-</div>
 EOD;
 
     $data['layout_test_1col_with_form'][] = <<<'EOD'
@@ -165,14 +165,14 @@ public function renderLayoutData() {
 EOD;
 
     $data['layout_test_1col_no_template'][] = <<<'EOD'
-<div data-drupal-selector="edit-layout" class="layout--layout-test-1col-no-template">
-  <div class="region--top">
-    This is the top
-  </div>
-  <div class="region--bottom">
-    This is the bottom
-  </div>
-</div>
+  <div data-drupal-selector="edit-layout" class="layout--layout-test-1col-no-template">
+      <div class="region--top">
+      This is the top
+    </div>
+      <div class="region--bottom">
+      This is the bottom
+    </div>
+    </div>
 EOD;
 
     $data['layout_test_2col'][] = <<<'EOD'