Show date posted on smaller viewports

src/components/header.jsx

@@ -34,7 +34,7 @@ const Header = () => {
 					}
 					{
 						data.allMarkdownRemark.nodes.map(node => (
-							<li>
+							<li key={node.id}>
 								<Link to={`/${node.frontmatter.slug}`} activeClassName="fly-nav-active">{node.frontmatter.title}</Link>
 							</li>
 						))

src/pages/index.js

@@ -41,12 +41,14 @@ const Blog = ({data}) => {
         <Layout>
             {
                 data.allMarkdownRemark.nodes.map(node => (
-                    <div className="fly-flex fly-flex-space-between fly-margin-bottom" key={node.id}>
-                        <div>
-                            <Link to={`/${node.frontmatter.slug}`} className="fly-text-lead">{node.frontmatter.title}</Link>
-                            <p className="fly-margin-none-top">{node.frontmatter.description}</p>
+                    <div className="fly-margin-large-bottom" key={node.id}>
+                        <div className="fly-flex fly-flex-space-between fly-margin-bottom fly-flex-break-mobile">
+                            <div>
+                                <Link to={`/${node.frontmatter.slug}`} className="fly-text-lead">{node.frontmatter.title}</Link>
+                                <p className="fly-margin-none">{node.frontmatter.description}</p>
+                            </div>
+                            <p className="fly-margin-none fly-text-muted">{node.frontmatter.date}</p>
                         </div>
-                        <p className="fly-margin-none-top fly-mobile-only">{node.frontmatter.date}</p>
                     </div>
                 ))
             }

src/style.css

@@ -122,6 +122,13 @@ h1{
     flex-wrap: wrap;
 }
 
+@media only screen and (max-width: 768px){
+
+    .fly-flex-break-mobile{
+        flex-direction: column;
+    }
+}
+
 /* height */
 
 .fly-full-height{
@@ -193,6 +200,10 @@ h1{
     margin-top: 1.5rem;
 }
 
+.fly-margin-large-bottom{
+    margin-bottom: 1.5rem;
+}
+
 /* grid */
 
 .fly-grid{
@@ -217,16 +228,8 @@ h1{
     width: 100%;
 }
 
-.fly-mobile-only{
-    display: none;
-}
-
 @media only screen and (min-width: 768px){
 
-    .fly-mobile-only{
-        display: initial;
-    }
-
     .fly-width-expand-small{
         width: initial;
     }