Child style loads before all parent styles

Question

I'm trying to move to child themes, but seem to have a problem with the order that stylesheets are loaded.

I have a parent theme, which is using wp_enqueue_style to load all stylesheets, this includes the main stylesheet, Bootstrap, and some others.

When I create a child theme, and then add it's own stylesheet to the wp_enqueue_style, it loads it up first before all of the parent ones.

How can I reverse this so the child stylesheet is loaded last (after the parent stylesheet)?

// Parent Theme Stylesheets
function psychic2016_load_scripts() {
    wp_enqueue_style('bootstrapCSS',get_template_directory_uri().'/css/bootstrap.min.css');
    wp_enqueue_style('bootstrapSocial',get_template_directory_uri().'/css/bootstrap-social.css',array());
    wp_enqueue_style('bootstrapThemeCSS',get_template_directory_uri().'/css/bootstrap-theme.min.css');
    wp_enqueue_style('fontawesome',get_template_directory_uri().'/css/font-awesome.min.css');
    wp_enqueue_style('intltelinput',get_template_directory_uri().'/css/intltelinput.css');
    wp_enqueue_style('stylesheet',get_stylesheet_uri());
}
add_action( 'wp_enqueue_scripts', 'psychic2016_load_scripts' );

// Child Theme Stylesheets
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css');
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

With it like this, the stylesheets are loading in this order:

UPDATE

When adding the dependency to the child functions call, I get the child CSS now loaded in two position, one at the top of everything, and the second in place of the parent style theme, underneath everything.

Answer 1

What I see here is you are not using dependency parameter in your child theme to load the css.

wp_enqueue_style() accepts 5 arguments. The 3rd one is dependency. This dependency allows your css file to load after that.

So if you will add the parent stylesheet handle in child dependency then this will load after your parent css file.

For more information on wp_enqueue_style() please go through https://developer.wordpress.org/reference/functions/wp_enqueue_style/

So your code will be

// Child Theme Stylesheets
function my_theme_enqueue_styles() {
    wp_enqueue_style('stylesheet',get_template_directory_uri().'/style.css' ) // parent theme style.css
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', 'stylesheet' ); // child theme style.css
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

Here the 3rd argument is the handle of your parent stylesheet. Hope this helps you out.

Note : You can use get_stylesheet_uri() function to load your child theme's style.css file.

Update: Please go through this link. Loading a child-theme's style.css after the parent's

Thanks