Почему не подключаются стили для мобильной версии сайта?

Думаю стоит уточнить: как вы проверяете, что "телефонная" версия подключается или не подключается? На реальном телефоне? Не закешировались ли эти стили?

P.S.: И да, это скорее не "телефонная", а "вертикальная". Телефон, как и монитор компьютера, можно повернуть.

Во-первых,

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">

Во-вторых, вьюпорт телефона отличается от вьюпорта декстопа не ориентацией, а размером. Ведь можно и браузер сжать и экран повернуть.
В-третьих, обычно разумнее писать @media в самом css, а не подключать разные версии файлов.