add an breakpoint at screen width equal to 640px

assets/css/atom.scss

@@ -1,7 +1,37 @@
-// $devices: ("", 0), (sm\:, 480px);
+@mixin breakpoint($k, $v) {
-// @each $dev, $size in devices {
+  @if $k == "" {
-//   // this is gonna waste hella space
+    @content;
-// }
+  }
+  @else {
+    @media (min-width: $v) {
+      @content;
+    }
+  }
+}
+
+/* flex */
+$screens: ("", 0), (sm\:, 640px);
+@each $k, $v in $screens {
+  @include breakpoint($k, $v) {
+    .#{$k}flex { display: flex; }
+    
+    .#{$k}flex-row { flex-direction: row; }
+    
+    .#{$k}flex-col { flex-direction: column; }
+
+    .#{$k}flex-col-reverse { flex-direction: column-reverse; }
+    
+    .#{$k}justify-between { justify-content: space-between; }
+    
+    .#{$k}items-center { align-items: center; }
+    
+    .#{$k}items-start { align-items: flex-start; }
+    
+    .#{$k}items-end { align-items: flex-end; }
+    
+    .#{$k}items-baseline { align-items: baseline; }
+  }
+}
 
 /* layout */
 .container {
@@ -20,39 +50,6 @@
   overflow-y: hidden;
 }
 
-/* flex & grid */
-.flex {
-  display: flex;
-}
-
-.flex-row {
-  flex-direction: row;
-}
-
-.flex-column {
-  flex-direction: column;
-}
-
-.justify-between {
-  justify-content: space-between;
-}
-
-.items-center {
-  align-items: center;
-}
-
-.items-start {
-  align-items: flex-start;
-}
-
-.items-end {
-  align-items: flex-end;
-}
-
-.items-baseline {
-  align-items: baseline;
-}
-
 /* spacing */
 $u: 0.25;
 @each $i, $class in (p, padding), (m, margin) {

layouts/partials/footer.html

@@ -1,6 +1,6 @@
 <footer class="mt-8 mb-8">
   <div class="container mx-auto">
-    <div class="mt-8 flex justify-between items-center">
+    <div class="mt-8 flex flex-col-reverse sm:flex-row sm:justify-between items-center">
       <p class="mt-0 text-sm">
         {{ .Site.Copyright }} |
         <a href="https://gohugo.io" target="_blank" rel="noopener noreferrer">Hugo</a> on

layouts/partials/item.html

@@ -1,5 +1,5 @@
 <div>
-  <div class="flex justify-between items-start">
+  <div class="flex flex-col-reverse sm:flex-row sm:justify-between">
     {{ if .Page.Params.link }}
     <a class="text-lg font-bold" href="{{ .Page.Params.link }}">{{ .Title }}</a>
     {{ else }}