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?
 

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