From 42e0ed0d99449452c66b0cbe8cdb4d2527b6f95e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Emi=20Pallar=C3=A8s?= <epallares@adobe.com>
Date: Fri, 29 Nov 2024 17:21:31 +0100
Subject: [PATCH] move place order button to main column

---
 .../commerce-checkout/commerce-checkout.css   | 23 +++++++++++++++++--
 blocks/commerce-checkout/commerce-checkout.js |  2 +-
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/blocks/commerce-checkout/commerce-checkout.css b/blocks/commerce-checkout/commerce-checkout.css
index 2a4f361d7..ccbeda69a 100644
--- a/blocks/commerce-checkout/commerce-checkout.css
+++ b/blocks/commerce-checkout/commerce-checkout.css
@@ -254,6 +254,27 @@
 }
 
 @media only screen and (width >= 320px) and (width <= 768px) {
+  .checkout__main,
+  .checkout__aside {
+    display: contents;
+  }
+
+  .checkout__block {
+    order: 3;
+  }
+
+  .checkout__heading {
+    order: 1;
+  }
+
+  .checkout__cart-summary {
+    order: 2;
+  }
+
+  .checkout__place-order {
+    order: 4;
+  }
+
   .order-confirmation {
     grid-template-columns: repeat(var(--grid-1-columns), 1fr);
     padding-top: 0;
@@ -304,8 +325,6 @@
   }
 
   .checkout__place-order {
-    display: grid;
-    grid-column: 1 / span 7;
     margin-top: 0;
   }
 }
diff --git a/blocks/commerce-checkout/commerce-checkout.js b/blocks/commerce-checkout/commerce-checkout.js
index 44bafc57e..a30347c86 100644
--- a/blocks/commerce-checkout/commerce-checkout.js
+++ b/blocks/commerce-checkout/commerce-checkout.js
@@ -142,12 +142,12 @@ export default async function decorate(block) {
           <div class="checkout__block checkout__delivery"></div>
           <div class="checkout__block checkout__payment-methods"></div>
           <div class="checkout__block checkout__billing-form"></div>
+          <div class="checkout__block checkout__place-order"></div>
         </div>
         <div class="checkout__aside">
           <div class="checkout__block checkout__order-summary"></div>
           <div class="checkout__block checkout__cart-summary"></div>
         </div>
-        <div class="checkout__block checkout__place-order"></div>
       </div>
     </div>
   `);