How do I move product photos AFTER product details on mobile view?

Site URL: https://nooke.ph/shop/abstract-desk

Hello, my website is on 7.0. The product images are stacked on web and mobile. It looks fine on web. But on mobile, users have to scroll all the way down before they see the product details and CTA.

Is there a way to change the order on mobile? I'd like to have the primary image stay where it is but the rest of the images be positioned below "Add to Cart". Thank you!!

4 hours ago, Nooke said:

Site URL: https://nooke.ph/shop/abstract-desk

Hello, my website is on 7.0. The product images are stacked on web and mobile. It looks fine on web. But on mobile, users have to scroll all the way down before they see the product details and CTA.

Is there a way to change the order on mobile? I'd like to have the primary image stay where it is but the rest of the images be positioned below "Add to Cart". Thank you!!

The Css approach I can find is

@media only screen and (max-width: 767px){
  .ProductItem-summary {
    display: flex;
  }

  .ProductItem-gallery {
    order: 3;
  }
  
  .ProductItem-details {
    order: 2;
  }
}

The order on mobile is: heading > product description, CTA > Image List

Hope it makes sense