From 36447908812336bda5abc96dec9e01386c48a29f Mon Sep 17 00:00:00 2001
From: Sluijsens <bdslop@gmail.com>
Date: Mon, 17 Aug 2026 10:51:04 +0200
Subject: [PATCH] Toon foto boven tekst in Over-sectie op mobiel

Op mobiel (grid-cols-1) volgde de layout de DOM-volgorde, waardoor de
fotoplaceholder onder de tekst stond. Met order-1/order-2 staat de
foto nu bovenaan op mobiel, en blijft de bestaande tekst-links/foto-
rechts indeling behouden vanaf sm.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/features/landing/components/AboutSection.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/features/landing/components/AboutSection.tsx b/src/features/landing/components/AboutSection.tsx
index ad5a80c..237954b 100644
--- a/src/features/landing/components/AboutSection.tsx
+++ b/src/features/landing/components/AboutSection.tsx
@@ -5,7 +5,7 @@ export function AboutSection() {
     <section id="over" className="py-[88px]">
       <div className="mx-auto max-w-[1080px] px-6">
         <div className="grid grid-cols-1 items-start gap-12 sm:grid-cols-[1.2fr_0.8fr]">
-          <div>
+          <div className="order-2 sm:order-1">
             <div className="mb-6">
               <span className="font-mono block text-sm uppercase tracking-wider text-accent">
                 // over
@@ -20,7 +20,7 @@ export function AboutSection() {
               </p>
             ))}
           </div>
-          <div className="font-mono flex aspect-[4/5] w-full flex-col items-center justify-center gap-2 rounded border border-dashed border-line bg-surface p-6 text-center text-[0.8rem] uppercase tracking-wider text-muted">
+          <div className="font-mono order-1 flex aspect-[4/5] w-full flex-col items-center justify-center gap-2 rounded border border-dashed border-line bg-surface p-6 text-center text-[0.8rem] uppercase tracking-wider text-muted sm:order-2">
             <span>foto</span>
             <span>Bryan Slop</span>
           </div>