How to put out of stock products at the end of collection and there's a pagination

I tried this one, but it sorts page by page not the whole collection. Is there a better idea?

{% for product in collection.products %}
  {% if product.available %}
       /* This will display all the available products first */
  {% endif %}
{% endfor %}

{% for product in collection.products %}
  {% unless product.available %}
       /* This will display all the unavailable products after the available products */
  {% endunless %}
{% endfor %}

Hi @Mo2323 ,

I am Anni From https://www.task4store.com/ - Shopify Small & Custom Tasks Experts ( By MS Web Designer - Top Rated Shopify Certified Experts and eCommerce Consultant from Singapore )

I will love to help you with your concern.

-Kindly Provide your Store URL,
-Also Mention Which Shopify theme you are using

Note: If your store is protected with ‘store Font password’ please Send it here or DM me.

If you have any concerns feel free to ask me!

Regards,
Anni