CSS Load Order not working

I'm on SF 9.2 and have created my own Master templates and themes following exactly what is recommended in this documentation. And I have the cssLoadOrder.xml to load the css in a certain order.

File: ~/App_Data/Sitefinity/WebsiteTemplates/YourTemplate/App_Themes/YourTheme/cssLoadOrder.xml

<?xml version="1.0" encoding="utf-8" ?>
<cssFiles>
<file>bootstrap.css</file>
<file>style.css</file>
<file>swiper.css</file>
<file>dark.css</file>
<file>font-icons.css</file>
<file>animate.css</file>
<file>magnific-popup.css</file>
<file>responsive.css</file>
<file>custom.css</file>
</cssFiles>

This is the order that the browser loads the css.

<link href="/Sitefinity/WebsiteTemplates/WLNA/App_Themes/Default/global/animate.css?v=636262923507301760" type="text/css" rel="stylesheet" />

<link href="/Sitefinity/WebsiteTemplates/WLNA/App_Themes/Default/global/bootstrap.css?v=636263854423417116" type="text/css" rel="stylesheet" />

<link href="/Sitefinity/WebsiteTemplates/WLNA/App_Themes/Default/global/custom.css?v=636263857100190218" type="text/css" rel="stylesheet" />

<link href="/Sitefinity/WebsiteTemplates/WLNA/App_Themes/Default/global/dark.css?v=636262923514472170" type="text/css" rel="stylesheet" />

<link href="/Sitefinity/WebsiteTemplates/WLNA/App_Themes/Default/global/font-icons.css?v=636262923516272273" type="text/css" rel="stylesheet" />

<link href="/Sitefinity/WebsiteTemplates/WLNA/App_Themes/Default/global/magnific-popup.css?v=636262923517242328" type="text/css" rel="stylesheet" />

<link href="/Sitefinity/WebsiteTemplates/WLNA/App_Themes/Default/global/responsive.css?v=636262923519032431" type="text/css" rel="stylesheet" />

<link href="/Sitefinity/WebsiteTemplates/WLNA/App_Themes/Default/global/style.css?v=636263842269361944" type="text/css" rel="stylesheet" />

<link href="/Sitefinity/WebsiteTemplates/WLNA/App_Themes/Default/global/swiper.css?v=636262923531843163" type="text/css" rel="stylesheet" />