Fix footer in small screens

src/_includes/partials/footer.liquid

@@ -1,13 +1,12 @@
 <footer class="wrapper-full">
     <div>
+        {% render 'partials/components/socials', socials: author.socials, mail: author.mail, showLabel: false %}
         <ul class="list-inline">
             <li>Réalisé avec {% render 'partials/components/link', label: "Eleventy", href: "https://11ty.dev/", target: "_blank", rel: "nofollow" %}</li>
             {% if site.repository and site.repository != "" %}
                 <li>Source sur {% render 'partials/components/link', label: site.repoSrc, href: site.repository, target: "_blank", rel: "nofollow" %}</li>
             {% endif %}
         </ul>
-        
-        {% render 'partials/components/socials', socials: author.socials, mail: author.mail, showLabel: false %}
     </div>
 </footer>
 

src/css/footer.css

@@ -4,9 +4,10 @@ footer {
 }
 footer > div {
   place-content: center space-between;
-  align-items: center;
+  align-items: start;
   width: 100%;
   display: flex;
+  flex-direction: column;
 }
 footer .list-inline a {
   --item-color: var(--text-2);
@@ -22,4 +23,10 @@ footer .socials-list {
 }
 footer .button.button {
   --button-padding: .2em;
+}
+@media (min-width: 768px) {
+  footer > div {
+    align-items: center;
+    flex-direction: row-reverse;
+  }
 }