update about flex columns layout

assets/css/_about.scss

@@ -90,7 +90,11 @@
   }
 
   .column {
+    flex: 0 0 100%;
+
+    @media (min-width: 500px) {
       flex: 0 0 50%;
+    }
 
     @media (min-width: 768px) {
       flex: 0 0 33%;
@@ -105,5 +109,19 @@
     li {
       margin: 1rem 0;
     }
+
+    @media (max-width: 768px) {
+      &.column-cms {
+        order: 3;
+      }
+
+      &.column-modern {
+        order: 2;
+      }
+
+      &.column-legacy {
+        order: 4;
+      }
+    }
   }
 }

content/about.html

@@ -55,7 +55,7 @@ date: 2020-01-31T12:54:00Z
     </ul>
   </div>
 
-  <div class="column">
+  <div class="column column-cms">
     <h3>Content Management Systems</h3>
 
     <ul>
@@ -66,7 +66,7 @@ date: 2020-01-31T12:54:00Z
     </ul>
   </div>
 
-  <div class="column">
+  <div class="column column-modern">
     <h3>Modern Frameworks and Libraries</h3>
 
     <ul>
@@ -77,9 +77,8 @@ date: 2020-01-31T12:54:00Z
       <li><p>Tailwind</p></li>
     </ul>
   </div>
-</div>
 
-<div class="column">
+  <div class="column column-legacy">
     <h3>Legacy and Other Web Technologies</h3>
 
     <ul>
@@ -87,6 +86,7 @@ date: 2020-01-31T12:54:00Z
       <li><p>Bootstrap</p></li>
     </ul>
   </div>
+</div>
 
 <script>
   var introEl = document.getElementById('js-intro');