diff --git a/css/style.css b/css/style.css
index b1ecdbb..d58b6b5 100644
--- a/css/style.css
+++ b/css/style.css
@@ -7669,3 +7669,64 @@ html, body {
     text-align: left !important;
   }
 }
+
+
+/* --- Sprememba vrstnega reda za DELAVNICE na mobilnih napravah --- */
+@media (max-width: 768px) {
+  /* 1. Odpremo "škatle", da lahko elemente prosto premešamo */
+  .workshop-grid {
+    display: flex !important;
+    flex-direction: column !important;
+  }
+  
+  .workshop-text, .workshop-image {
+    display: contents !important; /* To odstrani meje stolpcev na mobilniku */
+  }
+  
+  /* 2. Določimo vrstni red (ORDER) */
+  /* A) Slika in opomba pod njo - NA VRHU */
+  .workshop-image-frame {
+    order: 1 !important;
+    margin-bottom: 1rem !important;
+  }
+  
+  .workshop-image-note {
+    order: 2 !important;
+    margin-bottom: 1.5rem !important;
+  }
+  
+  /* B) Naslov in bold uvod - V SREDINI */
+  .workshop-text h2 {
+    order: 3 !important;
+    margin-top: 0 !important;
+    margin-bottom: 0.5rem !important;
+  }
+  
+  .workshop-text .workshop-lead {
+    order: 4 !important;
+    margin-bottom: 2rem !important;
+  }
+  
+  /* C) Prva sekcija (Komu je delavnica namenjena?) - TAKOJ ZA NASLOVOM */
+  .workshop-section:first-of-type {
+    order: 4 !important;
+    margin-bottom: 2rem !important;
+  }
+  
+  /* D) Rezultati - ZA PRVO SEKCIJO */
+  .workshop-benefits {
+    order: 5 !important;
+    margin-bottom: 2rem !important;
+  }
+  
+  /* E) Ostale podrobnosti in gumb - NA DNU */
+  .workshop-section {
+    order: 6 !important;
+    margin-bottom: 1rem !important;
+  }
+  
+  .pdf-button {
+    order: 7 !important;
+    margin-top: 1rem !important;
+  }
+}