diff --git a/content/index.blade.php b/content/index.blade.php
index 8c7f075..0b85184 100644
--- a/content/index.blade.php
+++ b/content/index.blade.php
@@ -77,8 +77,21 @@
             </div>
         </div>
         <div class="row">
-            <div class="col-4 overflow-auto" style="height: 80vh;" id="contents">
-                <div class="card d-none address">
+
+            <div class="col-12 col-md-8 g-0 ps-3 order-md-last">
+                <div id="map"></div>
+                <div id="marker-window" class="d-none">
+                    <h6 id="firstHeading" class="firstHeading">$title</h6>
+                    <div id="bodyContent">
+                        <img class="img-fluid rounded" data-src="$image" alt="">
+
+                        <p>$description</p>
+                        <a data-href="$path" style="outline: none;">Details</a>
+                    </div>
+                </div>
+            </div>
+            <div class="col-12 col-md-4 overflow-auto mt-3 mt-md-0" style="height: 80vh;" id="contents">
+                <div class="card d-none address ">
                     <div class="card-body">
                         <div class="row">
                             <div class="col-12 col-md-5">
@@ -92,18 +105,7 @@
                     </div>
                 </div>
             </div>
-            <div class="col-8 g-0 ps-3">
-                <div id="map"></div>
-                <div id="marker-window" class="d-none">
-                    <h6 id="firstHeading" class="firstHeading">$title</h6>
-                    <div id="bodyContent">
-                        <img class="img-fluid rounded" data-src="$image" alt="">
 
-                        <p>$description</p>
-                        <a data-href="$path" style="outline: none;">Details</a>
-                    </div>
-                </div>
-            </div>
         </div>
     </div>
     <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>