Improve blog post headers with flexbox

_layouts/post.html

@@ -2,11 +2,9 @@
 layout: default
 ---
 <div class="card">
-  <div class="row clearfix post-header">
-    <div class="column three-fourths">
+  <div class="row clearfix">
+    <div class="column full post-header">
       <h2 class="post-title"><a href="{{ post.url }}">{{ page.title }}</a></h2>
-    </div>
-    <div class="column fourth">
       <span class="timestamp">{{ page.date | date_to_string }}</span> 
     </div>
   </div>

blog/index.html

@@ -6,12 +6,10 @@ title: Tyler Hallada - Blog
 {% for post in paginator.posts %}
   {% if post.hidden == null or post.hidden == false %}
     <div class="card">
-      <div class="row clearfix post-header">
-        <div class="column three-fourths">
+      <div class="row clearfix">
+        <div class="column full post-header">
           <h2 class="post-title"><a href="{{ post.url }}">{{ post.title }}</a></h2>
-        </div>
-        <div class="column fourth">
-          <span class="timestamp">{{ post.date | date_to_string }}</span> 
+          <span class="timestamp">{{ post.date | date_to_string }}</span>
         </div>
       </div>
       <div class="row clearfix">

css/main.css

@@ -148,6 +148,8 @@ blockquote p {
   .column.third { width: 33.3%; }
   .column.fourth { width: 25%; }
   .column.three-fourths { width: 75%; }
+  .column.fifth { width: 20%; }
+  .column.four-fifths { width: 80%; }
   .column.flow-opposite { float: right; }  
 }
 
@@ -244,18 +246,18 @@ div.header a {
 }
 
 span.timestamp {
+  display: block;
   font-size: 0.85rem;
-  margin-top: 7px;
-}
-
-@media (min-width: 40rem) {
-  span.timestamp {
-    float: right;
-  }
+  margin-top: 8px;
 }
 
 .post-header {
-  padding-bottom: 10px;
+  padding-bottom: 24px;
+  display: flex;
+  align-items: start;
+  justify-content: space-between;
+  column-gap: 12px;
+  flex-wrap: wrap;
 }
 
 a.read-more {