diff --git a/src/block-components/alignment/attributes.js b/src/block-components/alignment/attributes.js
index 7c635d869..49d31e148 100644
--- a/src/block-components/alignment/attributes.js
+++ b/src/block-components/alignment/attributes.js
@@ -30,8 +30,9 @@ export const addAttributes = attrObject => {
 				default: '',
 			},
 			innerBlockOrientation: {
+				stkResponsive: true,
 				type: 'string',
-				default: '',
+				default: 'vertical',
 			},
 			// Flex.
 			innerBlockJustify: {
diff --git a/src/block-components/alignment/edit.js b/src/block-components/alignment/edit.js
index dd02239e3..ea83c26f4 100644
--- a/src/block-components/alignment/edit.js
+++ b/src/block-components/alignment/edit.js
@@ -55,8 +55,12 @@ const ALIGN_OPTIONS_NO_JUSTIFY = ALIGN_OPTIONS.filter( option => option.align !=
 export const Edit = memo( props => {
 	const {
 		contentAlign,
+		contentAlignTablet,
+		contentAlignMobile,
 		columnJustify,
 		innerBlockOrientation,
+		innerBlockOrientationTablet,
+		innerBlockOrientationMobile,
 		innerBlockWrap,
 		containerWidth,
 		containerWidthTablet,
@@ -67,8 +71,12 @@ export const Edit = memo( props => {
 	} = useBlockAttributesContext( attributes => {
 		return {
 			contentAlign: attributes.contentAlign,
+			contentAlignTablet: attributes.contentAlignTablet,
+			contentAlignMobile: attributes.contentAlignMobile,
 			columnJustify: attributes.columnJustify,
 			innerBlockOrientation: attributes.innerBlockOrientation,
+			innerBlockOrientationTablet: attributes.innerBlockOrientationTablet,
+			innerBlockOrientationMobile: attributes.innerBlockOrientationMobile,
 			innerBlockWrap: attributes.innerBlockWrap,
 			containerWidth: attributes.containerWidth,
 			containerWidthTablet: attributes.containerWidthTablet,
@@ -81,6 +89,14 @@ export const Edit = memo( props => {
 	const setAttributes = useBlockSetAttributesContext()
 	const deviceType = useDeviceType()
 
+	const _contentAlignTablet = contentAlignTablet || contentAlign
+	const _contentAlignMobile = contentAlignMobile || _contentAlignTablet
+
+	const _innerBlockOrientationTablet = innerBlockOrientationTablet || innerBlockOrientation
+	const _innerBlockOrientationMobile = innerBlockOrientationMobile || _innerBlockOrientationTablet
+
+	const _innerBlockOrientation = deviceType === 'Desktop' ? innerBlockOrientation : ( deviceType === 'Tablet' ? _innerBlockOrientationTablet : _innerBlockOrientationMobile )
+
 	const {
 		labelContentAlign = sprintf( __( '%s Alignment', i18n ), __( 'Content', i18n ) ),
 		enableContentAlign = true,
@@ -140,8 +156,16 @@ export const Edit = memo( props => {
 		<>
 			<BlockControls>
 				<AlignmentToolbar
-					value={ contentAlign }
-					onChange={ contentAlign => setAttributes( { contentAlign } ) }
+					value={ deviceType === 'Desktop' ? contentAlign : ( deviceType === 'Tablet' ? _contentAlignTablet : _contentAlignMobile ) }
+					onChange={ contentAlign => {
+						if ( deviceType === 'Desktop' ) {
+							setAttributes( { contentAlign } )
+						} else if ( deviceType === 'Tablet' ) {
+							setAttributes( { contentAlignTablet: contentAlign } )
+						} else {
+							setAttributes( { contentAlignMobile: contentAlign } )
+						}
+					} }
 					alignmentControls={ props.hasContentJustify ? ALIGN_OPTIONS : ALIGN_OPTIONS_NO_JUSTIFY }
 				/>
 
@@ -220,19 +244,53 @@ export const Edit = memo( props => {
 								title: __( 'Horizontal', i18n ),
 							},
 							{
-								value: '',
+								value: 'vertical',
 								title: __( 'Vertical', i18n ),
 							},
 						] }
 						attribute="innerBlockOrientation"
+						responsive="all"
+						value={ _innerBlockOrientation }
+						default="vertical"
 						onChange={ value => {
-							const newAttributes = {
-								innerBlockOrientation: value,
+							const newAttributes = {}
+
+							if ( deviceType === 'Desktop' ) {
+								newAttributes.innerBlockOrientation = value
+							} else if ( deviceType === 'Tablet' && innerBlockOrientation === value ) {
+								newAttributes.innerBlockOrientationTablet = ''
+							} else if ( deviceType === 'Tablet' ) {
+								newAttributes.innerBlockOrientationTablet = value
+							} else if ( deviceType === 'Mobile' && _innerBlockOrientationTablet === value ) {
+								newAttributes.innerBlockOrientationMobile = ''
+							} else if ( deviceType === 'Mobile' ) {
+								newAttributes.innerBlockOrientationMobile = value
 							}
-							if ( value === '' ) { // Vertical.
-								newAttributes.innerBlockJustify = ''
+
+							if ( value === 'vertical' ) { // Vertical.
+								if ( deviceType === 'Desktop' ) {
+									newAttributes.innerBlockJustify = ''
+								}
+
+								if ( deviceType === 'Tablet' || ( deviceType === 'Desktop' && ! innerBlockOrientationTablet ) ) {
+									newAttributes.innerBlockJustifyTablet = ''
+								}
+
+								if ( deviceType === 'Mobile' || ( deviceType === 'Desktop' && ! innerBlockOrientationTablet && ! innerBlockOrientationMobile ) || ( deviceType === 'Tablet' && ! innerBlockOrientationMobile ) ) {
+									newAttributes.innerBlockJustifyMobile = ''
+								}
 							} else { // Horizontal
-								newAttributes.innerBlockAlign = ''
+								if ( deviceType === 'Desktop' ) {
+									newAttributes.innerBlockAlign = ''
+								}
+
+								if ( deviceType === 'Tablet' || ( deviceType === 'Desktop' && ! innerBlockOrientationTablet ) ) {
+									newAttributes.innerBlockAlignTablet = ''
+								}
+
+								if ( deviceType === 'Mobile' || ( deviceType === 'Desktop' && ! innerBlockOrientationTablet && ! innerBlockOrientationMobile ) || ( deviceType === 'Tablet' && ! innerBlockOrientationMobile ) ) {
+									newAttributes.innerBlockAlignMobile = ''
+								}
 							}
 							setAttributes( newAttributes )
 						} }
@@ -243,7 +301,7 @@ export const Edit = memo( props => {
 						label={ sprintf( __( '%s Justify', i18n ), __( 'Inner Block', i18n ) ) }
 						attribute="innerBlockJustify"
 						responsive="all"
-						controls={ innerBlockOrientation ? 'flex-horizontal' : 'horizontal' }
+						controls={ _innerBlockOrientation === 'horizontal' ? 'flex-horizontal' : 'horizontal' }
 						visualGuide={ {
 							selector: '.stk-%s-container, .stk-%s-container > * > .block-editor-block-list__layout > [data-type]',
 							highlight: 'outline-first-offset',
@@ -259,7 +317,7 @@ export const Edit = memo( props => {
 						label={ sprintf( __( '%s Alignment', i18n ), __( 'Inner Block', i18n ) ) }
 						attribute="innerBlockAlign"
 						responsive="all"
-						controls={ innerBlockOrientation ? 'vertical' : 'flex-justify-vertical' }
+						controls={ _innerBlockOrientation === 'horizontal' ? 'vertical' : 'flex-justify-vertical' }
 						disabled={ alignLastBlockToBottom ? 'all' : undefined }
 						visualGuide={ {
 							selector: '.stk-%s-container, .stk-%s-container > * > .block-editor-block-list__layout > [data-type]',
@@ -272,7 +330,7 @@ export const Edit = memo( props => {
 						help={ __( 'Set Content Min. Height for alignment to display properly', i18n ) }
 					/>
 				}
-				{ innerBlockOrientation &&
+				{ _innerBlockOrientation &&
 					<AdvancedToolbarControl
 						label={ __( 'Inner Block Wrapping', i18n ) }
 						controls={ [
@@ -288,7 +346,7 @@ export const Edit = memo( props => {
 						attribute="innerBlockWrap"
 					/>
 				}
-				{ innerBlockOrientation && // This is "column gap" when the blocks are horizontal.
+				{ _innerBlockOrientation && // This is "column gap" when the blocks are horizontal.
 					<AdvancedRangeControl
 						label={ innerBlockWrap === 'wrap'
 							? sprintf( __( '%s %s', i18n ), __( 'Inner Block', i18n ), __( 'Column Gap', i18n ) )
@@ -314,7 +372,7 @@ export const Edit = memo( props => {
 						}
 					/>
 				}
-				{ ( props.hasColumnAlignment || props.hasBlockAlignment ) && ! innerBlockOrientation && // This is "row gap" when the blocks are vertical.
+				{ ( props.hasColumnAlignment || props.hasBlockAlignment ) && _innerBlockOrientation !== 'horizontal' && // This is "row gap" when the blocks are vertical.
 					<AdvancedRangeControl
 						label={ sprintf( __( '%s %s', i18n ), __( 'Inner Block', i18n ), __( 'Gap', i18n ) ) }
 						responsive="all"
@@ -333,7 +391,7 @@ export const Edit = memo( props => {
 						} }
 					/>
 				}
-				{ ( innerBlockOrientation && innerBlockWrap === 'wrap' ) &&
+				{ ( _innerBlockOrientation === 'horizontal' && innerBlockWrap === 'wrap' ) &&
 					<AdvancedRangeControl
 						label={ sprintf( __( '%s %s', i18n ), __( 'Inner Block', i18n ), __( 'Row Gap', i18n ) ) }
 						responsive="all"
diff --git a/src/block-components/alignment/editor.scss b/src/block-components/alignment/editor.scss
index 81edbeb9d..efde1c500 100644
--- a/src/block-components/alignment/editor.scss
+++ b/src/block-components/alignment/editor.scss
@@ -1,3 +1,5 @@
+@import "common";
+
 .stk--column-flex,
 // If an direct inner block has a top/bottom margin-auto, then we need to set
 // the height to full (similar to .stk--column-flex) so the margin auto would
@@ -6,38 +8,113 @@
 .stk--align-last-block-to-bottom {
 	height: auto; // Reverse the 100% height from style.scss
 	&:not(.stk--block-horizontal-flex) {
-		> .block-editor-inner-blocks {
-			flex: 1 1 100%;
-			display: flex;
-			flex-direction: column;
-			> .block-editor-block-list__layout {
+		@include desktop {
+			> .block-editor-inner-blocks {
 				flex: 1 1 100%;
-				display: flex !important;
+				display: flex;
 				flex-direction: column;
-				> * {
-					width: auto;
-					margin-inline: 0;
+				> .block-editor-block-list__layout {
+					flex: 1 1 100%;
+					display: flex !important;
+					flex-direction: column;
+					> * {
+						width: auto;
+						margin-inline: 0;
 
-					// Placeholder images will collapse.
-					&[data-type="stackable/image"]:has(.stk-img-placeholder) {
-						min-width: min(30%, 200px);
+						// Placeholder images will collapse.
+						&[data-type="stackable/image"]:has(.stk-img-placeholder) {
+							min-width: min(30%, 200px);
+						}
 					}
 				}
 			}
 		}
 	}
 	&.stk--block-horizontal-flex {
-		> .block-editor-inner-blocks {
-			> .block-editor-block-list__layout {
-				height: 100%;
-				> * {
-					margin-inline: 0;
+		@include desktop {
+			> .block-editor-inner-blocks {
+				> .block-editor-block-list__layout {
+					height: 100%;
+					> * {
+						margin-inline: 0;
+					}
 				}
 			}
 		}
 	}
-}
 
+	&:not(.stk--block-horizontal-flex-tablet) {
+		@include tablet {
+			> .block-editor-inner-blocks {
+				flex: 1 1 100%;
+				display: flex;
+				flex-direction: column;
+				> .block-editor-block-list__layout {
+					flex: 1 1 100%;
+					display: flex !important;
+					flex-direction: column;
+					> * {
+						width: auto;
+						margin-inline: 0;
+
+						// Placeholder images will collapse.
+						&[data-type="stackable/image"]:has(.stk-img-placeholder) {
+							min-width: min(30%, 200px);
+						}
+					}
+				}
+			}
+		}
+	}
+	&.stk--block-horizontal-flex-tablet {
+		@include tablet {
+			> .block-editor-inner-blocks {
+				> .block-editor-block-list__layout {
+					height: 100%;
+					> * {
+						margin-inline: 0;
+					}
+				}
+			}
+		}
+	}
+
+	&:not(.stk--block-horizontal-flex-mobile) {
+		@include mobile {
+			> .block-editor-inner-blocks {
+				flex: 1 1 100%;
+				display: flex;
+				flex-direction: column;
+				> .block-editor-block-list__layout {
+					flex: 1 1 100%;
+					display: flex !important;
+					flex-direction: column;
+					> * {
+						width: auto;
+						margin-inline: 0;
+
+						// Placeholder images will collapse.
+						&[data-type="stackable/image"]:has(.stk-img-placeholder) {
+							min-width: min(30%, 200px);
+						}
+					}
+				}
+			}
+		}
+	}
+	&.stk--block-horizontal-flex-mobile {
+		@include mobile {
+			> .block-editor-inner-blocks {
+				> .block-editor-block-list__layout {
+					height: 100%;
+					> * {
+						margin-inline: 0;
+					}
+				}
+			}
+		}
+	}
+}
 
 // for firefox :has polyfill
 // this needs to be on a separate css ruleset because firefox ignores any CSS ruleset that includes the :has selector
diff --git a/src/block-components/alignment/style.js b/src/block-components/alignment/style.js
index 5efa60abf..ef0b2c048 100644
--- a/src/block-components/alignment/style.js
+++ b/src/block-components/alignment/style.js
@@ -11,8 +11,8 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
 		editorSelectorCallback = getAttribute => `.stk--block-align-${ getAttribute( 'uniqueId' ) }`,
 		columnAlignSelectorEditCallback = ( () => '' ),
 		columnAlignSelectorSaveCallback = ( () => '' ),
-		innerBlockSelectorCallback = getAttribute => `.stk-${ getAttribute( 'uniqueId' ) }-inner-blocks > .block-editor-inner-blocks > .block-editor-block-list__layout`,
-		editorInnerBlockSelectorCallback = getAttribute => `.stk-${ getAttribute( 'uniqueId' ) }-inner-blocks`,
+		editorInnerBlockSelectorCallback = getAttribute => `.stk-${ getAttribute( 'uniqueId' ) }-inner-blocks > .block-editor-inner-blocks > .block-editor-block-list__layout`,
+		innerBlockSelectorCallback = getAttribute => `.stk-${ getAttribute( 'uniqueId' ) }-inner-blocks`,
 		dependencies = [],
 	} = props
 
@@ -62,15 +62,43 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
 		],
 	} ] )
 
-	{ /* When blocks are vertical */ }
-	blockStyleGenerator.addBlockStyles( 'innerBlockJustify', [ {
+	blockStyleGenerator.addBlockStyles( 'innerBlockOrientation', [ {
 		...propsToPass,
 		renderIn: 'edit',
+		selectorCallback: editorInnerBlockSelectorCallback,
+		styleRule: 'flexDirection',
+		attrName: 'innerBlockOrientation',
+		key: 'innerBlockOrientation',
+		responsive: 'all',
+		valueCallback: value => value === 'horizontal' ? 'row' : 'column',
+		dependencies: [
+			'innerBlockOrientation',
+			...dependencies,
+		],
+	}, {
+		...propsToPass,
+		renderIn: 'save',
 		selectorCallback: innerBlockSelectorCallback,
+		styleRule: 'flexDirection',
+		attrName: 'innerBlockOrientation',
+		key: 'innerBlockOrientation-save',
+		responsive: 'all',
+		valueCallback: value => value === 'horizontal' ? 'row' : 'column',
+		dependencies: [
+			'innerBlockOrientation',
+			...dependencies,
+		 ],
+	} ] )
+
+	/* Desktop alignItems */
+	blockStyleGenerator.addBlockStyles( 'innerBlockJustify', [ {
+		...propsToPass,
+		renderIn: 'edit',
+		selectorCallback: editorInnerBlockSelectorCallback,
 		styleRule: 'alignItems',
 		attrName: 'innerBlockJustify',
 		key: 'innerBlockJustifyVerticalEdit',
-		responsive: 'all',
+		responsive: [ 'desktop' ],
 		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientation' ) !== 'horizontal',
 		dependencies: [
 			'innerBlockOrientation',
@@ -79,11 +107,11 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
 	}, {
 		...propsToPass,
 		renderIn: 'save',
-		selectorCallback: editorInnerBlockSelectorCallback,
+		selectorCallback: innerBlockSelectorCallback,
 		styleRule: 'alignItems',
 		attrName: 'innerBlockJustify',
 		key: 'innerBlockJustifyVerticalSave',
-		responsive: 'all',
+		responsive: [ 'desktop' ],
 		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientation' ) !== 'horizontal',
 		dependencies: [
 			'innerBlockOrientation',
@@ -94,11 +122,154 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
 	blockStyleGenerator.addBlockStyles( 'innerBlockAlign', [ {
 		...propsToPass,
 		renderIn: 'edit',
+		selectorCallback: editorInnerBlockSelectorCallback,
+		styleRule: 'alignItems',
+		attrName: 'innerBlockAlign',
+		key: 'innerBlockAlignHorizontalEdit',
+		responsive: [ 'desktop' ],
+		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientation' ) === 'horizontal',
+		dependencies: [
+			'innerBlockOrientation',
+			...dependencies,
+		],
+	}, {
+		...propsToPass,
+		renderIn: 'save',
+		selectorCallback: innerBlockSelectorCallback,
+		styleRule: 'alignItems',
+		attrName: 'innerBlockAlign',
+		key: 'innerBlockAlignHorizontalSave',
+		responsive: [ 'desktop' ],
+		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientation' ) === 'horizontal',
+		dependencies: [
+			'innerBlockOrientation',
+			...dependencies,
+		],
+	} ] )
+
+	/* Tablet alignItems */
+	blockStyleGenerator.addBlockStyles( 'innerBlockJustify', [ {
+		...propsToPass,
+		renderIn: 'edit',
+		selectorCallback: editorInnerBlockSelectorCallback,
+		styleRule: 'alignItems',
+		attrName: 'innerBlockJustify',
+		key: 'innerBlockJustifyVerticalEdit',
+		responsive: [ 'tablet' ],
+		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientationTablet' ) ? getAttribute( 'innerBlockOrientationTablet' ) !== 'horizontal' : getAttribute( 'innerBlockOrientation' ) !== 'horizontal',
+		dependencies: [
+			'innerBlockOrientation',
+			...dependencies,
+		],
+	}, {
+		...propsToPass,
+		renderIn: 'save',
 		selectorCallback: innerBlockSelectorCallback,
+		styleRule: 'alignItems',
+		attrName: 'innerBlockJustify',
+		key: 'innerBlockJustifyVerticalSave',
+		responsive: [ 'tablet' ],
+		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientationTablet' ) ? getAttribute( 'innerBlockOrientationTablet' ) !== 'horizontal' : getAttribute( 'innerBlockOrientation' ) !== 'horizontal',
+		dependencies: [
+			'innerBlockOrientation',
+			...dependencies,
+		],
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'innerBlockAlign', [ {
+		...propsToPass,
+		renderIn: 'edit',
+		selectorCallback: editorInnerBlockSelectorCallback,
+		styleRule: 'alignItems',
+		attrName: 'innerBlockAlign',
+		key: 'innerBlockAlignHorizontalEdit',
+		responsive: [ 'tablet' ],
+		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientationTablet' ) ? getAttribute( 'innerBlockOrientationTablet' ) === 'horizontal' : getAttribute( 'innerBlockOrientation' ) === 'horizontal',
+		dependencies: [
+			'innerBlockOrientation',
+			...dependencies,
+		],
+	}, {
+		...propsToPass,
+		renderIn: 'save',
+		selectorCallback: innerBlockSelectorCallback,
+		styleRule: 'alignItems',
+		attrName: 'innerBlockAlign',
+		key: 'innerBlockAlignHorizontalSave',
+		responsive: [ 'tablet' ],
+		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientationTablet' ) ? getAttribute( 'innerBlockOrientationTablet' ) === 'horizontal' : getAttribute( 'innerBlockOrientation' ) === 'horizontal',
+		dependencies: [
+			'innerBlockOrientation',
+			...dependencies,
+		],
+	} ] )
+
+	/* Mobile alignItems */
+	blockStyleGenerator.addBlockStyles( 'innerBlockJustify', [ {
+		...propsToPass,
+		renderIn: 'edit',
+		selectorCallback: editorInnerBlockSelectorCallback,
+		styleRule: 'alignItems',
+		attrName: 'innerBlockJustify',
+		key: 'innerBlockJustifyVerticalEdit',
+		responsive: [ 'mobile' ],
+		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientationMobile' ) ? getAttribute( 'innerBlockOrientationMobile' ) !== 'horizontal' : ( getAttribute( 'innerBlockOrientationTablet' ) ? getAttribute( 'innerBlockOrientationTablet' ) !== 'horizontal' : getAttribute( 'innerBlockOrientation' ) !== 'horizontal' ),
+		dependencies: [
+			'innerBlockOrientation',
+			...dependencies,
+		],
+	}, {
+		...propsToPass,
+		renderIn: 'save',
+		selectorCallback: innerBlockSelectorCallback,
+		styleRule: 'alignItems',
+		attrName: 'innerBlockJustify',
+		key: 'innerBlockJustifyVerticalSave',
+		responsive: [ 'mobile' ],
+		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientationMobile' ) ? getAttribute( 'innerBlockOrientationMobile' ) !== 'horizontal' : ( getAttribute( 'innerBlockOrientationTablet' ) ? getAttribute( 'innerBlockOrientationTablet' ) !== 'horizontal' : getAttribute( 'innerBlockOrientation' ) !== 'horizontal' ),
+		dependencies: [
+			'innerBlockOrientation',
+			...dependencies,
+		],
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'innerBlockAlign', [ {
+		...propsToPass,
+		renderIn: 'edit',
+		selectorCallback: editorInnerBlockSelectorCallback,
+		styleRule: 'alignItems',
+		attrName: 'innerBlockAlign',
+		key: 'innerBlockAlignHorizontalEdit',
+		responsive: [ 'mobile' ],
+		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientationMobile' ) ? getAttribute( 'innerBlockOrientationMobile' ) === 'horizontal' : ( getAttribute( 'innerBlockOrientationTablet' ) ? getAttribute( 'innerBlockOrientationTablet' ) === 'horizontal' : getAttribute( 'innerBlockOrientation' ) === 'horizontal' ),
+		dependencies: [
+			'innerBlockOrientation',
+			...dependencies,
+		],
+	}, {
+		...propsToPass,
+		renderIn: 'save',
+		selectorCallback: innerBlockSelectorCallback,
+		styleRule: 'alignItems',
+		attrName: 'innerBlockAlign',
+		key: 'innerBlockAlignHorizontalSave',
+		responsive: [ 'mobile' ],
+		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientationMobile' ) ? getAttribute( 'innerBlockOrientationMobile' ) === 'horizontal' : ( getAttribute( 'innerBlockOrientationTablet' ) ? getAttribute( 'innerBlockOrientationTablet' ) === 'horizontal' : getAttribute( 'innerBlockOrientation' ) === 'horizontal' ),
+		dependencies: [
+			'innerBlockOrientation',
+			...dependencies,
+		],
+	} ] )
+
+	/* Desktop justifyContent */
+	blockStyleGenerator.addBlockStyles( 'innerBlockAlign', [ {
+		...propsToPass,
+		renderIn: 'edit',
+		selectorCallback: editorInnerBlockSelectorCallback,
 		styleRule: 'justifyContent',
 		attrName: 'innerBlockAlign',
 		key: 'innerBlockAlignVerticalEdit',
-		responsive: 'all',
+		responsive: [ 'desktop' ],
 		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientation' ) !== 'horizontal',
 		dependencies: [
 			'innerBlockOrientation',
@@ -107,11 +278,11 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
 	}, {
 		...propsToPass,
 		renderIn: 'save',
-		selectorCallback: editorInnerBlockSelectorCallback,
+		selectorCallback: innerBlockSelectorCallback,
 		styleRule: 'justifyContent',
 		attrName: 'innerBlockAlign',
 		key: 'innerBlockAlignVerticalSave',
-		responsive: 'all',
+		responsive: [ 'desktop' ],
 		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientation' ) !== 'horizontal',
 		dependencies: [
 			'innerBlockOrientation',
@@ -119,15 +290,14 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
 		],
 	} ] )
 
-	{ /* When blocks are horizontal */ }
 	blockStyleGenerator.addBlockStyles( 'innerBlockJustify', [ {
 		...propsToPass,
 		renderIn: 'edit',
-		selectorCallback: innerBlockSelectorCallback,
+		selectorCallback: editorInnerBlockSelectorCallback,
 		styleRule: 'justifyContent',
 		attrName: 'innerBlockJustify',
 		key: 'innerBlockJustifyHorizontalEdit',
-		responsive: 'all',
+		responsive: [ 'desktop' ],
 		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientation' ) === 'horizontal',
 		dependencies: [
 			'innerBlockOrientation',
@@ -136,11 +306,11 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
 	}, {
 		...propsToPass,
 		renderIn: 'save',
-		selectorCallback: editorInnerBlockSelectorCallback,
+		selectorCallback: innerBlockSelectorCallback,
 		styleRule: 'justifyContent',
 		attrName: 'innerBlockJustify',
 		key: 'innerBlockJustifyHorizontalSave',
-		responsive: 'all',
+		responsive: [ 'desktop' ],
 		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientation' ) === 'horizontal',
 		dependencies: [
 			'innerBlockOrientation',
@@ -148,15 +318,44 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
 		],
 	} ] )
 
+	/* Tablet justifyContent */
 	blockStyleGenerator.addBlockStyles( 'innerBlockAlign', [ {
 		...propsToPass,
 		renderIn: 'edit',
+		selectorCallback: editorInnerBlockSelectorCallback,
+		styleRule: 'justifyContent',
+		attrName: 'innerBlockAlign',
+		key: 'innerBlockAlignVerticalEdit',
+		responsive: [ 'tablet' ],
+		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientationTablet' ) ? getAttribute( 'innerBlockOrientationTablet' ) !== 'horizontal' : getAttribute( 'innerBlockOrientation' ) !== 'horizontal',
+		dependencies: [
+			'innerBlockOrientation',
+			...dependencies,
+		],
+	}, {
+		...propsToPass,
+		renderIn: 'save',
 		selectorCallback: innerBlockSelectorCallback,
-		styleRule: 'alignItems',
+		styleRule: 'justifyContent',
 		attrName: 'innerBlockAlign',
-		key: 'innerBlockAlignHorizontalEdit',
-		responsive: 'all',
-		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientation' ) === 'horizontal',
+		key: 'innerBlockAlignVerticalSave',
+		responsive: [ 'tablet' ],
+		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientationTablet' ) ? getAttribute( 'innerBlockOrientationTablet' ) !== 'horizontal' : getAttribute( 'innerBlockOrientation' ) !== 'horizontal',
+		dependencies: [
+			'innerBlockOrientation',
+			...dependencies,
+		],
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'innerBlockJustify', [ {
+		...propsToPass,
+		renderIn: 'edit',
+		selectorCallback: editorInnerBlockSelectorCallback,
+		styleRule: 'justifyContent',
+		attrName: 'innerBlockJustify',
+		key: 'innerBlockJustifyHorizontalEdit',
+		responsive: [ 'tablet' ],
+		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientationTablet' ) ? getAttribute( 'innerBlockOrientationTablet' ) === 'horizontal' : getAttribute( 'innerBlockOrientation' ) === 'horizontal',
 		dependencies: [
 			'innerBlockOrientation',
 			...dependencies,
@@ -164,22 +363,80 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
 	}, {
 		...propsToPass,
 		renderIn: 'save',
+		selectorCallback: innerBlockSelectorCallback,
+		styleRule: 'justifyContent',
+		attrName: 'innerBlockJustify',
+		key: 'innerBlockJustifyHorizontalSave',
+		responsive: [ 'tablet' ],
+		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientationTablet' ) ? getAttribute( 'innerBlockOrientationTablet' ) === 'horizontal' : getAttribute( 'innerBlockOrientation' ) === 'horizontal',
+		dependencies: [
+			'innerBlockOrientation',
+			...dependencies,
+		],
+	} ] )
+
+	/* Mobile justifyContent */
+	blockStyleGenerator.addBlockStyles( 'innerBlockAlign', [ {
+		...propsToPass,
+		renderIn: 'edit',
 		selectorCallback: editorInnerBlockSelectorCallback,
-		styleRule: 'alignItems',
+		styleRule: 'justifyContent',
 		attrName: 'innerBlockAlign',
-		key: 'innerBlockAlignHorizontalSave',
-		responsive: 'all',
-		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientation' ) === 'horizontal',
+		key: 'innerBlockAlignVerticalEdit',
+		responsive: [ 'mobile' ],
+		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientationMobile' ) ? getAttribute( 'innerBlockOrientationMobile' ) !== 'horizontal' : ( getAttribute( 'innerBlockOrientationTablet' ) ? getAttribute( 'innerBlockOrientationTablet' ) !== 'horizontal' : getAttribute( 'innerBlockOrientation' ) !== 'horizontal' ),
+		dependencies: [
+			'innerBlockOrientation',
+			...dependencies,
+		],
+	}, {
+		...propsToPass,
+		renderIn: 'save',
+		selectorCallback: innerBlockSelectorCallback,
+		styleRule: 'justifyContent',
+		attrName: 'innerBlockAlign',
+		key: 'innerBlockAlignVerticalSave',
+		responsive: [ 'mobile' ],
+		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientationMobile' ) ? getAttribute( 'innerBlockOrientationMobile' ) !== 'horizontal' : ( getAttribute( 'innerBlockOrientationTablet' ) ? getAttribute( 'innerBlockOrientationTablet' ) !== 'horizontal' : getAttribute( 'innerBlockOrientation' ) !== 'horizontal' ),
 		dependencies: [
 			'innerBlockOrientation',
 			...dependencies,
 		],
 	} ] )
 
-	blockStyleGenerator.addBlockStyles( 'innerBlockWrap', [ {
+	blockStyleGenerator.addBlockStyles( 'innerBlockJustify', [ {
 		...propsToPass,
 		renderIn: 'edit',
+		selectorCallback: editorInnerBlockSelectorCallback,
+		styleRule: 'justifyContent',
+		attrName: 'innerBlockJustify',
+		key: 'innerBlockJustifyHorizontalEdit',
+		responsive: [ 'mobile' ],
+		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientationMobile' ) ? getAttribute( 'innerBlockOrientationMobile' ) === 'horizontal' : ( getAttribute( 'innerBlockOrientationTablet' ) ? getAttribute( 'innerBlockOrientationTablet' ) === 'horizontal' : getAttribute( 'innerBlockOrientation' ) === 'horizontal' ),
+		dependencies: [
+			'innerBlockOrientation',
+			...dependencies,
+		],
+	}, {
+		...propsToPass,
+		renderIn: 'save',
 		selectorCallback: innerBlockSelectorCallback,
+		styleRule: 'justifyContent',
+		attrName: 'innerBlockJustify',
+		key: 'innerBlockJustifyHorizontalSave',
+		responsive: [ 'mobile' ],
+		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientationMobile' ) ? getAttribute( 'innerBlockOrientationMobile' ) === 'horizontal' : ( getAttribute( 'innerBlockOrientationTablet' ) ? getAttribute( 'innerBlockOrientationTablet' ) === 'horizontal' : getAttribute( 'innerBlockOrientation' ) === 'horizontal' ),
+		dependencies: [
+			'innerBlockOrientation',
+			...dependencies,
+		],
+	} ] )
+
+	/* Inner Block Wrap */
+	blockStyleGenerator.addBlockStyles( 'innerBlockWrap', [ {
+		...propsToPass,
+		renderIn: 'edit',
+		selectorCallback: editorInnerBlockSelectorCallback,
 		styleRule: 'flexWrap',
 		attrName: 'innerBlockWrap',
 		key: 'innerBlockWrapEdit',
@@ -192,7 +449,7 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
 	}, {
 		...propsToPass,
 		renderIn: 'save',
-		selectorCallback: editorInnerBlockSelectorCallback,
+		selectorCallback: innerBlockSelectorCallback,
 		styleRule: 'flexWrap',
 		attrName: 'innerBlockWrap',
 		key: 'innerBlockWrapSave',
@@ -207,7 +464,7 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
 	blockStyleGenerator.addBlockStyles( 'innerBlockColumnGap', [ {
 		...propsToPass,
 		renderIn: 'edit',
-		selectorCallback: innerBlockSelectorCallback,
+		selectorCallback: editorInnerBlockSelectorCallback,
 		styleRule: 'columnGap',
 		attrName: 'innerBlockColumnGap',
 		key: 'innerBlockColumnGapEdit',
@@ -221,7 +478,7 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
 	}, {
 		...propsToPass,
 		renderIn: 'save',
-		selectorCallback: editorInnerBlockSelectorCallback,
+		selectorCallback: innerBlockSelectorCallback,
 		styleRule: 'columnGap',
 		attrName: 'innerBlockColumnGap',
 		key: 'innerBlockColumnGapSave',
@@ -237,7 +494,7 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
 	blockStyleGenerator.addBlockStyles( 'innerBlockRowGap', [ {
 		...propsToPass,
 		renderIn: 'edit',
-		selectorCallback: innerBlockSelectorCallback,
+		selectorCallback: editorInnerBlockSelectorCallback,
 		styleRule: 'rowGap',
 		attrName: 'innerBlockRowGap',
 		key: 'innerBlockRowGapEdit',
@@ -255,7 +512,7 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
 	}, {
 		...propsToPass,
 		renderIn: 'save',
-		selectorCallback: editorInnerBlockSelectorCallback,
+		selectorCallback: innerBlockSelectorCallback,
 		styleRule: 'rowGap',
 		attrName: 'innerBlockRowGap',
 		key: 'innerBlockRowGapSave',
@@ -276,7 +533,7 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
 	blockStyleGenerator.addBlockStyles( 'innerBlockAlign', [ {
 		...propsToPass,
 		renderIn: 'edit',
-		selectorCallback: innerBlockSelectorCallback,
+		selectorCallback: editorInnerBlockSelectorCallback,
 		styleRule: 'alignContent',
 		attrName: 'innerBlockAlign',
 		key: 'innerBlockAlignWrapEdit',
@@ -290,7 +547,7 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
 	}, {
 		...propsToPass,
 		renderIn: 'save',
-		selectorCallback: editorInnerBlockSelectorCallback,
+		selectorCallback: innerBlockSelectorCallback,
 		styleRule: 'alignContent',
 		attrName: 'innerBlockAlign',
 		key: 'innerBlockAlignWrapSave',
diff --git a/src/block-components/alignment/use-alignment.js b/src/block-components/alignment/use-alignment.js
index abf0ae6e9..7ae22948d 100644
--- a/src/block-components/alignment/use-alignment.js
+++ b/src/block-components/alignment/use-alignment.js
@@ -17,6 +17,8 @@ export const getAlignmentClasses = attributes => {
 		// We need to put this in a class to we can also target horizontal
 		// orientations in css.
 		[ `stk--block-horizontal-flex` ]: attributes.innerBlockOrientation === 'horizontal',
+		[ `stk--block-horizontal-flex-tablet` ]: attributes.innerBlockOrientationTablet === 'horizontal' || ( ! attributes.innerBlockOrientationTablet && attributes.innerBlockOrientation === 'horizontal' ),
+		[ `stk--block-horizontal-flex-mobile` ]: attributes.innerBlockOrientationMobile === 'horizontal' || ( ! attributes.innerBlockOrientationMobile && attributes.innerBlockOrientationTablet === 'horizontal' ) || ( ! attributes.innerBlockOrientationMobile && ! attributes.innerBlockOrientationTablet && attributes.innerBlockOrientation === 'horizontal' ),
 
 		// We need to put this class to make the
 		'stk--column-flex': attributes.innerBlockJustify || attributes.innerBlockAlign,
diff --git a/src/styles/editor-block.scss b/src/styles/editor-block.scss
index 1a2a6a1db..3871b1c06 100644
--- a/src/styles/editor-block.scss
+++ b/src/styles/editor-block.scss
@@ -185,22 +185,68 @@
 		width: 100%;
 	}
 }
-.stk--block-horizontal-flex > .block-editor-inner-blocks {
-	width: 100%;
-	> .block-editor-block-list__layout {
-		display: flex !important;
-		flex-direction: row;
-		justify-content: space-evenly; // Default justify-content for horizontal flex.
-		> * {
-			margin-top: 0;
-			margin-bottom: 0;
-			> .stk-block {
+@include desktop {
+	.stk--block-horizontal-flex > .block-editor-inner-blocks {
+		width: 100%;
+		> .block-editor-block-list__layout {
+			display: flex !important;
+			flex-direction: row;
+			justify-content: space-evenly; // Default justify-content for horizontal flex.
+			> * {
+				margin-top: 0;
 				margin-bottom: 0;
+				> .stk-block {
+					margin-bottom: 0;
+				}
+			}
+			> [data-block] {
+				width: auto;
+				margin-inline: revert;
 			}
 		}
-		> [data-block] {
-			width: auto;
-			margin-inline: revert;
+	}
+}
+
+@include tablet {
+	.stk--block-horizontal-flex-tablet > .block-editor-inner-blocks {
+		width: 100%;
+		> .block-editor-block-list__layout {
+			display: flex !important;
+			flex-direction: row;
+			justify-content: space-evenly; // Default justify-content for horizontal flex.
+			> * {
+				margin-top: 0;
+				margin-bottom: 0;
+				> .stk-block {
+					margin-bottom: 0;
+				}
+			}
+			> [data-block] {
+				width: auto;
+				margin-inline: revert;
+			}
+		}
+	}
+}
+
+@include mobile {
+	.stk--block-horizontal-flex-mobile > .block-editor-inner-blocks {
+		width: 100%;
+		> .block-editor-block-list__layout {
+			display: flex !important;
+			flex-direction: row;
+			justify-content: space-evenly; // Default justify-content for horizontal flex.
+			> * {
+				margin-top: 0;
+				margin-bottom: 0;
+				> .stk-block {
+					margin-bottom: 0;
+				}
+			}
+			> [data-block] {
+				width: auto;
+				margin-inline: revert;
+			}
 		}
 	}
 }