Make media queries for content direction

web/style/index.scss

@@ -62,6 +62,10 @@ a.external::after {
     margin-left: 1.4em;
     margin-right: 1.4em;
   }
+
+  .columns-on-tablet {
+    flex-direction: column;
+  }
 }
 
 @media all and (max-width: 512px) {
@@ -69,4 +73,8 @@ a.external::after {
     margin-left: 0.8em;
     margin-right: 0.8em;
   }
+
+  .columns-on-mobile {
+    flex-direction: column;
+  }
 }

web/style/menu.scss

@@ -46,6 +46,7 @@
 .menu-nav {
     display: flex;
     list-style: none;
+    align-items: flex-end;
 }
 .menu-nav > li::before {
     content: "";
@@ -56,10 +57,6 @@
 }
 
 @media all and (max-width: 1024px) {
-    .menu-nav {
-        flex-direction: column;
-        align-items: flex-end;
-    }
     .menu-nav > li.menu-nav-li1::before {
         display: inline;
     }
@@ -69,9 +66,6 @@
 }
 
 @media all and (max-width: 512px) {
-    .menu {
-        flex-direction: column;
-    }
     .menu-nav {
         margin-top: 0.3em;
     }