How to NOT override inline css rules

Please see this post about including styles and scripts correctly.

As far as I can see, you are just throwing in the style.css, giving WordPress not the opportunity to decide, which stylesheet comes when.

In order to do that, you need to register your style first, then WordPress can decide according to your priority, where to place the style.css.

In your case, you may need to make use of the function wp_is_mobile().

This is not your full correct answer, but it may be helpful for you to handle the problem better and finally solve it.

<?php

    // Example of correct use
    function se_my_script_example(){
        // first, "register" the style
        wp_register_style(
           'my-style-desktop', // Handle name
           get_template_directory_uri().'/style-desktop.css'); // Path to file
        // Then later on check what kind of device is coming in
        wp_register_style(
           'my-style-mobile', // Handle name
           get_template_directory_uri().'/style-mobile.css'); // Path to file
        // Then later on
        if(wp_is_mobile()) {
            wp_enqueque_style('my-style-desktop', $deps, $version, $footer);
        } else {
            wp_enqueque_style('my-style-mobile', $deps, $version, $footer);
        }

    }
    add_action('wp_enqueque_scripts', 'se_my_script_example');