Product information section showing below 'Add to cart' button on Mobile

I used a custom code block provided by this community to move "additional product details" directly below the product description. However, on mobile it's making my regular product detail show below the 'add to cart' button and everything else is showing above.

How can i fix this?
 

Edited May 20, 20241 yr by lovex3you
typo

Try this

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    function repositionElement() {
      if ($(window).width() > 768) {
        $('section.ProductItem-additional').insertAfter('.ProductItem-details-excerpt');
      }
    }

    repositionElement();
    $(window).resize(repositionElement);
  });
</script>
<style>
  @media (min-width: 769px) {
    section.ProductItem-summary {
      align-items: flex-start !important;
    }
    section.ProductItem-additional {
      margin-top: 20px !important;
      margin-bottom: 20px !important;
    }
  }
</style>

It checks the width of the viewport and only repositions the item if width > 768px.

 

It did not work 😞 -- still the same issue