How to make the RTL.css the dominant css code?

Question

To load your stylesheets in a particular order, add dependencies.

For example, to ensure the parent stylesheet is loaded before the child stylesheet, you would say

<?php
add_action( 'wp_enqueue_scripts', 'theme__child_enqueue_styles' );
function theme__child_enqueue_styles() {
wp_enqueue_style( 'theme-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'theme-child-style', get_stylesheet_uri(), array( 'theme-style' ) );
}
?>

The array after the stylesheet URL is an array of dependencies. You use the dependencies’ handles (in this case, your parent stylesheet handle is theme-style) and that tells WP to make sure all the dependencies are loaded before stylesheets that need to come last.

For additional dependencies just keep stacking:

<?php
add_action( 'wp_enqueue_scripts', 'theme__child_enqueue_styles' );
function theme__child_enqueue_styles() {
wp_enqueue_style( 'theme-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'theme-child-style', get_stylesheet_uri(), array( 'theme-style' ) );
wp_enqueue_style( 'parent-rtl-style', get_stylesheet_uri(), array( 'theme-style', 'theme-child-style' ) );
wp_enqueue_style( 'child-rtl-style', get_stylesheet_uri(), array( 'theme-style', 'theme-child-style', 'parent-rtl-style' ) );
}
?>