Testing with block styles.

packages/block-library/src/columns/block.json

@@ -59,6 +59,14 @@
 			}
 		}
 	},
+	"styles": [
+		{
+			"name": "regular",
+			"label": "Default",
+			"isDefault": true
+		},
+		{ "name": "tablet-stack", "label": "Tablet stack" }
+	],
 	"editorStyle": "wp-block-columns-editor",
 	"style": "wp-block-columns"
 }

packages/block-library/src/columns/style.scss

@@ -30,24 +30,12 @@
 	}
 
 	&:not(.is-not-stacked-on-mobile) > .wp-block-column {
-		@media (max-width: #{ ($break-small - 1) }) {
+		@media (max-width: #{ ($break-medium - 1) }) {
 			// Responsiveness: Show at most one columns on mobile. This must be
 			// important since the Column assigns its own width as an inline style.
 			flex-basis: 100% !important;
 		}
 
-		// Between mobile and large viewports (tablet), allow 2 columns.
-		@media (min-width: #{ ($break-small) }) and (max-width: #{ ($break-medium - 1) }) {
-			// Only add two column styling if there are two or more columns
-			&:not(:only-child) {
-				// As with mobile styles, this must be important since the Column
-				// assigns its own width as an inline style, which should take effect
-				// starting at `break-medium`.
-				// Note: to calculate the offset we have to add the root block gap value with any block support spacing value (stored in --wp--style--unstable-columns-gap).
-				flex-basis: calc(50% - calc(var(--wp--style--block-gap, 2em) + var(--wp--style--unstable-columns-gap, 0em) / 2)) !important;
-			}
-		}
-
 		// At large viewports, show all columns horizontally.
 		@include break-medium() {
 			// Available space should be divided equally amongst columns without an
@@ -68,6 +56,25 @@
 		}
 	}
 
+	&.is-style-tablet-stack:not(.is-not-stacked-on-mobile) > .wp-block-column {
+		@media (max-width: #{ ($break-small - 1) }) {
+			// Responsiveness: Show at most one columns on mobile. This must be
+			// important since the Column assigns its own width as an inline style.
+			flex-basis: 100% !important;
+		}
+		// Between mobile and large viewports (tablet), allow 2 columns.
+		@media (min-width: #{ ($break-small) }) and (max-width: #{ ($break-medium - 1) }) {
+			// Only add two column styling if there are two or more columns
+			&:not(:only-child) {
+				// As with mobile styles, this must be important since the Column
+				// assigns its own width as an inline style, which should take effect
+				// starting at `break-medium`.
+				// Note: to calculate the offset we have to add the root block gap value with any block support spacing value (stored in --wp--style--unstable-columns-gap).
+				flex-basis: calc(50% - calc(var(--wp--style--block-gap, 2em) + var(--wp--style--unstable-columns-gap, 0em) / 2)) !important;
+			}
+		}
+	}
+
 	&.is-not-stacked-on-mobile {
 		flex-wrap: nowrap !important;