Help rearrange layout of product information on product page ONLY on desktop

[crescenthu]

Hi! This is what my product information looks like in desktop view.

And I like this layout when it’s on mobile, so I’d like to keep it this way there. But on desktop view, I would want the Buy Buttons to be on the bottom of the section, like this:

Please help me with this, thanks in advance:

crescent.hu

Pw : theaba

[tim_1]

Here is the CSS:

.product__info-container {
  display: flex;
  flex-direction: column;
}

.product__info-container > * {
  width: 100%;
}

@media (min-width:750px) {
  div:has(> product-form) {order: 5;}
}

Try it in the “Custom CSS” of the Product info section first, if not accepted, add a “Custom Liquid” section right below the “product info” and paste the code there, wrapped with <style> … </style>

The code does not affect the mobile layout.

[crescenthu]

@tim_1

Thank you so much! Perfect