diff --git a/src/core/components/layout/components/hide/hide.tsx b/src/core/components/layout/components/hide/hide.tsx
index aa7a530c9..9069967d2 100644
--- a/src/core/components/layout/components/hide/hide.tsx
+++ b/src/core/components/layout/components/hide/hide.tsx
@@ -21,6 +21,7 @@ const Hide = ({ children, above, below }: HideProps) => {
 	}
 	if (above) {
 		whenToHide = css`
+			${whenToHide}
 			${from[above]} {
 				display: none;
 			}
diff --git a/src/core/components/layout/stories/hide/default.tsx b/src/core/components/layout/stories/hide/default.tsx
index 9c90fffb2..b4e129162 100644
--- a/src/core/components/layout/stories/hide/default.tsx
+++ b/src/core/components/layout/stories/hide/default.tsx
@@ -33,3 +33,17 @@ export const above = () => (
 above.story = {
 	name: 'above',
 };
+
+export const between = () => (
+	<Container>
+		<Hide below="tablet" above="leftCol">
+			<div css={contents}>
+				Will only appear between desktop and leftCol
+			</div>
+		</Hide>
+	</Container>
+);
+
+between.story = {
+	name: 'between',
+};