FEATURE layout stack order on mobile

dynamic · Sep 17, 2024 · b5d887f · b5d887f
1 parent 1f3d688
commit b5d887f
Showing 1 changed file with 6 additions and 6 deletions.
diff --git a/templates/Dynamic/Elements/Locations/Elements/ElementLocations.ss b/templates/Dynamic/Elements/Locations/Elements/ElementLocations.ss
@@ -4,16 +4,16 @@
 <% require css('dynamic/silverstripe-elemental-locations: dist/css/map.css') %>
 
 <div class="row g-0">
-    <div class="location-col col-md-3 bg-light">
+    <div class="col-md-9 order-md-2 order-1">
+        <!-- Map (full width) -->
+        <div id="map-{$ID}" class="locations-map col-12" data-key="$Key" data-link="$JSONLink" data-format="$MeasurementUnit" data-panel="panel-{$ID}" data-search="search-{$ID}"></div>
+    </div>
+    <div class="location-col col-md-3 bg-light order-md-1 order-2">
         <div id="search-{$ID}" class="locations-search col-md-12 bg-light p-3">
             <!-- Search form here -->
         </div>
         <div id="panel-{$ID}" class="locations-panel col-md-12 bg-light p-3">
             <!-- Panel content here -->
         </div>      
     </div>
-    <div class="col-md-9">
-        <!-- Map (full width) -->
-        <div id="map-{$ID}" class="locations-map col-12" data-key="$Key" data-link="$JSONLink" data-format="$MeasurementUnit" data-panel="panel-{$ID}" data-search="search-{$ID}"></div>
-    </div>  
-</div>
+</div>