Show images on small screens for blog posts, but not for regular pages

assets/style.scss

@@ -160,6 +160,7 @@ nav {
 
 article {
 	display: flex;
+	flex-direction: column;
 
 	&.preview {
 		margin-bottom: 3rem;
@@ -181,21 +182,15 @@ article {
 		}
 	}
 
-	&.page {
+	&.page, &.post {
 		& > .image {
-			display: none;
 			text-align: right;
 
 			& > img {
+				display: block;
 				height: auto;
 				width: 100%;
 			}
-
-			@media screen and (min-width: $small) {
-				display: block;
-				padding-left: 1.5em;
-				width: 60%;
-			}
 		}
 
 		& > .text {
@@ -206,6 +201,35 @@ article {
 			}
 		}
 	}
+
+	&.page > .image {
+		display: none;
+
+		@media screen and (min-width: $small) {
+			display: block;
+			padding-left: 1.5em;
+			width: 60%;
+		}
+	}
+
+	&.post {
+		& > .image {
+			margin-bottom: 1em;
+
+			@media screen and (min-width: $small) {
+				padding-left: 1.5em;
+				width: 60%;
+			}
+		}
+
+		@media screen and (min-width: $small) {
+			flex-direction: row-reverse;
+		}
+	}
+
+	@media screen and (min-width: $small) {
+		flex-direction: row;
+	}
 }
 
 a {

layouts/_default/single.html

@@ -1,9 +1,9 @@
 {{ define "main" }}
 <h1>{{ .Title }}</h1>
-{{ $textContent := .Content }}
+{{ $pages := .Site.GetPage "/pages" }}
+{{ $page := . }}
 {{ with .Resources.GetMatch "image.jpg" }}
-<article class="page">
+<article class="{{ if $pages.InSection $page }}page{{ else }}post{{ end }}">
-	<section class="text">{{ $textContent }}</section>
 	<section class="image">
 		<img alt="{{ .Title }}" src="{{ .RelPermalink }}">
 {{ $params := .Params }}
@@ -16,6 +16,7 @@
 {{ end }}
 {{ end }}
 	</section>
+	<section class="text">{{ $page.Content }}</section>
 </article>
 {{ else }}
 {{ .Content }}