diff --git a/assets/sass/_flex.scss b/assets/sass/_flex.scss
index 47bb563..ddc49a8 100644
--- a/assets/sass/_flex.scss
+++ b/assets/sass/_flex.scss
@@ -13,3 +13,9 @@
 .flex-direction-column {
     flex-direction: column;
 }
+
+.flex-sm-direction-column {
+    @media (max-width: $sm) {
+        flex-direction: column;
+    }
+}
diff --git a/layouts/snippets/single.html b/layouts/snippets/single.html
index 9ecc5f4..f95dde0 100644
--- a/layouts/snippets/single.html
+++ b/layouts/snippets/single.html
@@ -1,7 +1,7 @@
 {{ define "main" }}
 
 <h1>{{ .Title }}</h1>
-<div class="flex flex-spread">
+<div class="flex flex-spread flex-sm-direction-column">
     <span>Published on {{ .Date.Format "January 2, 2006" }}</span>
     <span>
         {{ range .Params.Tags }}