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 eb553cdf8a..fd4c648191 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 78db2b4b32..74686997c7 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,40 @@
  */
 #}
 {%
-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>
-  {% 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 layout-region--side">
-    {{ content.left }}
-  </div>
+    {% if content.left %}
+      <div class="layout-region layout-region--left">
+        {{ content.left }}
+      </div>
+    {% endif %}
 
-  <div class="layout-region layout-region--middle">
-    {{ content.middle }}
-  </div>
+    {% if content.left %}
+      <div class="layout-region layout-region--middle">
+        {{ content.middle }}
+      </div>
+    {% endif %}
 
-  <div class="layout-region layout-region--side">
-    {{ content.right }}
-  </div>
+    {% if content.left %}
+      <div class="layout-region layout-region--right">
+        {{ content.right }}
+      </div>
+    {% endif %}
 
-  {% if content.bottom %}
-    <div class="layout-region layout-region--fullwidth">
-      {{ content.bottom }}
-    </div>
-  {% endif %}
-</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/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 7472d55d66..9de16446e9 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
@@ -4,14 +4,21 @@
   justify-content: space-between;
 }
 
-.layout--threecol > .layout-region {
-  flex: 0 1 25%;
+.layout--threecol > .layout-region--left,
+.layout--threecol > .layout-region--right {
+  flex: 1 1 0;
 }
 
-.layout--threecol > .layout-region--fullwidth {
-  flex: 0 1 100%;
+.layout--threecol > .layout-region--middle {
+  flex: 2 1 0;
 }
 
-.layout--threecol > .layout-region--middle {
-  flex: 0 1 50%;
+@media screen and (max-width: 40em) {
+  .layout--threecol > .layout-region {
+    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 59461f42c2..7722986c6d 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,40 @@
  */
 #}
 {%
-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>
+    {% content.left %}
+      <div class="layout-region layout-region--left">
+        {{ content.left }}
+      </div>
+    {% endif %}
 
-  <div class="layout-region">
-    {{ content.middle }}
-  </div>
+    {% content.middle %}
+      <div class="layout-region layout-region--middle">
+        {{ content.middle }}
+      </div>
+    {% endif %}
 
-  <div class="layout-region">
-    {{ content.right }}
-  </div>
+    {% content.right %}
+      <div class="layout-region layout-region--right">
+        {{ content.right }}
+      </div>
+    {% endif %}
 
-  {% 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 7091416fdf..5557bbc1d5 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
@@ -4,10 +4,14 @@
   justify-content: space-between;
 }
 
-.layout--threecol-33 > .layout-region {
-  flex: 0 1 33%;
+.layout--threecol-33 > .layout-region--left,
+.layout--threecol-33 > .layout-region--middle,
+.layout--threecol-33 > .layout-region--right {
+  flex: 1 1 0;
 }
 
-.layout--threecol-33 > .layout-region--fullwidth {
-  flex: 0 1 100%;
+@media screen and (max-width: 40em) {
+  .layout--threecol > .layout-region {
+    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 efebf0f95e..66454c588a 100644
--- a/core/modules/layout_discovery/layouts/twocol/layout--twocol.html.twig
+++ b/core/modules/layout_discovery/layouts/twocol/layout--twocol.html.twig
@@ -11,26 +11,34 @@
  */
 #}
 {%
-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">
+        {{ content.top }}
+      </div>
+    {% endif %}
 
-    <div class="layout-region layout-region--left">
-      {{ content.left }}
-    </div>
+    {% if content.left %}
+      <div class="layout-region layout-region--left">
+        {{ content.left }}
+      </div>
+    {% endif %}
 
-    <div class="layout-region layout-region--right">
-      {{ content.right }}
-    </div>
+    {% if content.right %}
+      <div class="layout-region layout-region--right">
+        {{ content.right }}
+      </div>
+    {% endif %}
 
-    <div class="layout-region layout-region--fullwidth">
-      {{ content.bottom }}
-    </div>
+    {% if content.bottom %}
+      <div class="layout-region layout-region--bottom">
+        {{ 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 41e8883ddf..68c834de39 100644
--- a/core/modules/layout_discovery/layouts/twocol/twocol.css
+++ b/core/modules/layout_discovery/layouts/twocol/twocol.css
@@ -4,10 +4,13 @@
   justify-content: space-between;
 }
 
-.layout--twocol > .layout-region {
-  flex: 0 1 50%;
+.layout--twocol > .layout-region--left,
+.layout--twocol > .layout-region--right {
+  flex: 1 1 0;
 }
 
-.layout--twocol > .layout-region--fullwidth {
-  flex: 0 1 100%;
+@media screen and (max-width: 40em) {
+  .layout--twocol > .layout-region {
+    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 9c6231b8b5..78ace8b9ac 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,52 @@
  */
 #}
 {%
-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>
+    {% if content.left_above %}
+      <div class="layout-region layout-region--left-above">
+        {{ content.left_above }}
+      </div>
+    {% endif %}
 
-  <div class="layout-region layout-region--right_above">
-    {{ content.right_above }}
-  </div>
+    {% if content.right_above %}
+      <div class="layout-region layout-region--right-above">
+        {{ content.right_above }}
+      </div>
+    {% endif %}
 
-  <div class="layout-region layout-region--middle">
-    {{ content.middle }}
-  </div>
+    {% if content.middle %}
+      <div class="layout-region layout-region--middle layout-region--fullwidth">
+        {{ content.middle }}
+      </div>
+    {% endif %}
 
-  <div class="layout-region layout-region--left_below">
-    {{ content.left_below }}
-  </div>
+    {% if content.left_below %}
+      <div class="layout-region layout-region--left-below">
+        {{ content.left_below }}
+      </div>
+    {% endif %}
 
-  <div class="layout-region layout-region--right_below">
-    {{ content.right_below }}
-  </div>
+    {% if content.right_below %}
+      <div class="layout-region layout-region--right-below">
+        {{ content.right_below }}
+      </div>
+    {% endif %}
 
-  <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 aef887a4ac..605ae71a5e 100644
--- a/core/modules/layout_discovery/layouts/twocol_bricks/twocol_bricks.css
+++ b/core/modules/layout_discovery/layouts/twocol_bricks/twocol_bricks.css
@@ -5,7 +5,13 @@
 }
 
 .layout--twocol-bricks > .layout-region {
-  flex: 0 1 50%;
+  flex: 1 1 0;
+}
+
+@media screen and (max-width: 40em) {
+  .layout--twocol-bricks > .layout-region {
+    flex: 0 1 100%;
+  }
 }
 
 .layout--twocol-bricks > .layout-region--fullwidth {
diff --git a/core/modules/layout_discovery/templates/layout.html.twig b/core/modules/layout_discovery/templates/layout.html.twig
index 88ea7457d4..5aa58b1592 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 9d4c446d3c..cf60eac75b 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'