How to enqueue scripts in order of Head section

Question

I have the two scripts that I need to enqueue. I'd like the child theme's script to be loaded after the Mustache template scripts. Even when specifying the priority, the child theme's script is loaded before the Mustache script.

Loading order now: load_lh_script, load_external_script

How can I correct this script loading order to be like the following?

1. load_external_script
2. load_lh_script

---

function load_external_script()
    wp_register_script('mustache','https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js',null,null,false);
    wp_enqueue_script('mustache');
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
    wp_register_script('jqflip','https://cdnjs.cloudflare.com/ajax/libs/jQuery-Flip/1.1.2/jquery.flip.min.js',null,null,false);
    wp_enqueue_script('jqflip');
}
add_action('wp_enqueue_scripts','load_external_script',10);

function load_lh_script() { 
    wp_register_script('theme_js',get_stylesheet_directory_uri() . '/js/lh.js',array(), '1.0.0',false);
    wp_enqueue_script('theme_js');
}
add_action('wp_enqueue_scripts','load_lh_script',20);

Answer 1

You can dequeue the parent theme's styles, and then enqueue all the styles in any order you'd require. This is how you can do it:

function remove_parent_styles() {
    wp_dequeue_style( 'sample' );
    wp_deregister_style( 'sample' );

    // Now enqueue your styles and scripts in the order you wish.
    // Just add all of them one after another.
}
add_action( 'wp_enqueue_scripts', 'remove_parent_styles', 999 );

We also increased the priority to make sure out hook runs after the theme's styles are queued.