reorder subtitle display in mobile

css/posts.scss

@@ -29,16 +29,6 @@ aside {
 	padding: 0.5em;
 }
 
-aside:not(:last-child) {
-	border-left: 0.2em solid darkgreen;
-	float: right;
-	width: 40%;
-	margin: 1em;
-	margin-right: initial;
-	padding: 0.2em 0.5em;
-	text-align: left;
-}
-
 aside>blockquote {
 	padding: 0.1em 0.5em;
 	margin: 0;
@@ -194,12 +184,13 @@ header>h1>a:link, header>h1>a:visited {
 	text-align: left;
 }
 
+.post-title {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+}
+
 @media screen and (min-device-aspect-ratio: 1/1) and (orientation: landscape) {
-	.post-title {
-		display: flex;
-		justify-content: space-between;
-		flex-wrap: wrap;
-	}
 	.post-title h1 {
 		margin: 0;
 		margin-bottom: 0.5em;
@@ -235,17 +226,45 @@ header>h1>a:link, header>h1>a:visited {
 		float: right;
 		width: 30%;
 	}
+	aside:not(:last-child) {
+		border-left: 0.2em solid darkgreen;
+		float: right;
+		width: 40%;
+		margin: 1em;
+		margin-right: initial;
+		padding: 0.2em 0.5em;
+		text-align: left;
+	}
 }
 
 @media screen and (max-device-aspect-ratio: 1/1) and (orientation: portrait) {
+	.post-title > h2 {
+		order: 1;
+	}
 	.post-date {
 		font-size: 80%;
-		display: block;
-		text-align: right;
+		text-align: left;
+		order: 2;
+		flex-basis: 45%;
+		margin: auto 0;
 	}
 	.post-title h1 {
 		margin: 0;
 		line-height: 1.4em;
+		flex-basis: 100%;
+		text-align: center;
+	}
+	.post-title h2 {
+		font-size: 1.2em;
+		text-align: center;
+	}
+	ol.tags-list {
+		order: 3;
+		flex-basis: 48%;
+		margin-left: auto;
+	}
+	ol.tags-list li {
+		padding-right: 0;
 	}
 
 	kbd {