fix: illustration order on smaller screens

content/en/_index.html

@@ -47,7 +47,7 @@ linkTitle = "SelfPrivacy"
 		<div class="col-xs-12 col-md-8 my-auto">
 			<div class="container my-4">
 				<h1>
-					SelfPrivacy app allows you to set up self-hosted services and manage them.
+					SelfPrivacy app allows you to set up self-hosted services and manage them
 				</h1>
 				<a class="btn btn-lg btn-primary mb-4 mt-4 btn-block sp-button-shadow sp-button-big-padding" href="{{< relref "/download" >}}">
 					Download

layouts/shortcodes/landing-feature.html

@@ -1,8 +1,8 @@
 {{ $illustration := .Page.Resources.GetMatch (printf "**%s*" (.Get 0)) }}
 {{ $title := .Get 1 }}
 {{ $side := .Get 2 }}
-<div class="row justify-content-md-center my-2 align-items-center w-100">
-    {{ if eq $side "right" }}
+{{ if eq $side "right" }}
+<div class="d-flex flex-column flex-lg-row flex-xl-row justify-content-md-center mt-5 align-items-center w-100">
         <div class="col-md-8 col-xs-12 my-auto px-5">
             {{ if $title }}
                 <h2 class="sp-feature-title">{{ $title }}</h2>
@@ -15,6 +15,7 @@
         </div>
         {{ end }}
     {{ else }}
+<div class="d-flex flex-column-reverse flex-lg-row flex-xl-row justify-content-md-center mt-5 align-items-center w-100">
         {{ if $illustration }}
         <div class="col-md-4 col-xs-12 my-auto">
             <img class="card-img-top rounded-img" src="{{ $illustration.RelPermalink }}">

package.json

@@ -19,6 +19,6 @@
   "devDependencies": {
     "autoprefixer": "^10.4.0",
     "postcss": "^8.3.7",
-    "postcss-cli": "^9.0.2"
+    "postcss-cli": "^9.1.0"
   }
 }