diff -u b/modules/order/templates/commerce-order--admin.html.twig b/modules/order/templates/commerce-order--admin.html.twig
--- b/modules/order/templates/commerce-order--admin.html.twig
+++ b/modules/order/templates/commerce-order--admin.html.twig
@@ -23,7 +23,7 @@
 {% set order_state = order_entity.getState.getLabel %}
 
 <div class="layout-order-form clearfix">
-  <div class="layout-region layout-region-order-main">
+  <div class="layout-region layout-region--order-main">
     {{ order.order_items }}
     {{ order.total_price }}
 
@@ -32,7 +32,7 @@
       {{ order.activity }}
     {% endif %}
   </div>
-  <div class="layout-region layout-region-order-secondary">
+  <div class="layout-region layout-region--order-secondary">
     <div class="layout-region__content">
       <div class="entity-meta accordion ">
         <div class="entity-meta__header accordion__item ">
@@ -65,7 +65,7 @@
           <summary role="button" class="claro-details__summary claro-details__summary--accordion-item">
             {{ 'Customer Information'|t }}
           </summary>
-          <div class="claro-details__wrapper claro-details__wrapper--accordion-item">
+          <div class="claro-details__wrapper details-wrapper claro-details__wrapper--accordion-item">
             <div class="claro-details__content claro-details__content--accordion-item">
               {% for key in ['uid', 'mail', 'ip_address'] %}
                 {% if order[key] %}
@@ -82,7 +82,7 @@
             <summary role="button" class="claro-details__summary claro-details__summary--accordion-item">
               {{ 'Billing information'|t }}
             </summary>
-            <div class="claro-details__wrapper claro-details__wrapper--accordion-item">
+            <div class="claro-details__wrapper details-wrapper claro-details__wrapper--accordion-item">
               <div class="claro-details__content claro-details__content--accordion-item">
                 {{ order.billing_information }}
               </div>
@@ -94,7 +94,7 @@
             <summary role="button" class="claro-details__summary claro-details__summary--accordion-item">
               {{ 'Shipping information'|t }}
             </summary>
-            <div class="claro-details__wrapper claro-details__wrapper--accordion-item">
+            <div class="claro-details__wrapper details-wrapper claro-details__wrapper--accordion-item">
               <div class="claro-details__content claro-details__content--accordion-item">
                 {{ order.shipping_information }}
               </div>
@@ -107,7 +107,7 @@
               {{ 'Other'|t }}
             </summary>
             {# Show fields that are not shown elsewhere. #}
-            <div class="claro-details__wrapper claro-details__wrapper--accordion-item">
+            <div class="claro-details__wrapper details-wrapper claro-details__wrapper--accordion-item">
               <div class="claro-details__content claro-details__content--accordion-item">
                 {{ additional_order_fields }}
               </div>
only in patch2:
unchanged:
--- a/modules/order/css/commerce_order.module.css
+++ b/modules/order/css/commerce_order.module.css
@@ -4,90 +4,37 @@
  */
 
 /**
- * Order add/edit form layout.
+ * Layout overrides for order add/edit form.
  */
-
-/* Narrow screens */
 .layout-region {
   box-sizing: border-box;
 }
 
-/* Wide screens */
-@media
-  screen and (min-width: 780px),
-  (orientation: landscape) and (min-device-height: 780px) {
-
-  .layout-region-order-main,
-  .layout-region-order-footer {
-    float: left; /* LTR */
-    box-sizing: border-box;
-    width: 65%;
-    padding-right: 2em; /* LTR */
-  }
-
-  [dir="rtl"] .layout-region-order-main,
-  [dir="rtl"] .layout-region-order-footer {
-    float: right;
-    padding-right: 0;
-    padding-left: 2em;
-  }
-
-  .layout-region-order-secondary {
-    float: right; /* LTR */
-    width: 35%;
-  }
-
-  [dir="rtl"] .layout-region-order-secondary {
-    float: left;
-  }
-
-  /* @todo File an issue to add a standard class to all text-like inputs */
-  .layout-region-order-secondary .form-autocomplete,
-  .layout-region-order-secondary .form-text,
-  .layout-region-order-secondary .form-tel,
-  .layout-region-order-secondary .form-email,
-  .layout-region-order-secondary .form-url,
-  .layout-region-order-secondary .form-search,
-  .layout-region-order-secondary .form-number,
-  .layout-region-order-secondary .form-color,
-  .layout-region-order-secondary textarea {
-    box-sizing: border-box;
-    width: 100%;
-    max-width: 100%;
-  }
-
-  .layout-region-order-secondary .state-machine-transition-form .form-wrapper {
-    margin: 1.25em 0 0.75em;
-  }
+.layout-region--order-footer .layout-region__content {
+  margin-top: var(--space-l);
 }
 
 /**
- * The vertical toolbar mode gets triggered for narrow screens, which throws off
- * the intent of media queries written for the viewport width. When the vertical
- * toolbar is on, we need to suppress layout for the original media width + the
- * toolbar width (240px). In this case, 240px + 780px.
+ * Move to two column layout at wider widths.
  */
-@media
-  screen and (max-width: 1020px) {
-
-  .toolbar-vertical.toolbar-tray-open .layout-region-order-main,
-  .toolbar-vertical.toolbar-tray-open .layout-region-order-footer,
-  .toolbar-vertical.toolbar-tray-open .layout-region-order-secondary {
-    float: none;
-    width: auto;
-    padding-right: 0;
+@media (min-width: 61rem) {
+  .layout-order-form {
+    display: grid;
+    grid-template-rows: auto 1fr;
+    grid-template-columns: 3fr minmax(22.5rem, 1fr);
+    gap: var(--space-l);
   }
-}
 
-/* "Billing information" fieldset button positioning in Seven */
-#block-seven-content input[name="add_billing_information"] {
-  margin-top: 1em;
-}
-
-#block-seven-content input[name="billing_edit"] {
-  margin: 0;
-}
+  .layout-region--order-main,
+  .layout-region--order-footer {
+    grid-column: 1;
+    margin-inline: auto;
+    width: min(52rem, 100%);
+  }
 
-#block-seven-content input[name="hide_profile_form"] {
-  margin: 1em 0 0 0;
+  /* Push sidebar down to horizontal align with form section. */
+  .layout-region--order-secondary {
+    grid-row: span 2;
+    margin-block-start: var(--space-l);
+  }
 }