diff --git a/assets/mobile-patterns.json b/assets/mobile-patterns.json
new file mode 100644
index 0000000..9f06dac
--- /dev/null
+++ b/assets/mobile-patterns.json
@@ -0,0 +1,27 @@
+[
+  {
+    "name": "Mobile Dotted",
+    "type": "Simple",
+    "icon": "😌",
+    "pattern": [ 100, 100 ]
+  },
+  {
+    "name": "Mobile Short Dashed",
+    "type": "Simple",
+    "icon": "🙂",
+    "pattern": [ 250, 100 ]
+  },
+  {
+    "name": "Mobile Long Dashed",
+    "type": "Simple",
+    "icon": "🙂",
+    "pattern": [ 500, 100 ]
+  },
+  {
+    "name": "Mobile Constant",
+    "type": "Simple",
+    "icon": "🙂",
+    "pattern": [ 1000 ]
+  }
+]
+
diff --git a/css/styles.css b/css/styles.css
index af01444..fa8e71a 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -465,14 +465,21 @@ table, th, td {
 
 .wavelovers {
     display: flex;
-    flex-direction: column;
+    flex-direction: column-reverse;
     justify-content: flex-start;
     gap: 16px;
 }
 
+    @media only screen and (min-width: 540px) {
+        .wavelovers {
+            flex-direction: column;
+        }
+    }
+
 .message {
     width: 100%;
     display: flex;
+    flex-direction: column;
     justify-content: center;
     text-align: center;
     font-size: 24px;