This is because Storefront uses WooCommerce functions to print the breadcrumbs, before the content. But there’s another way to have that, with the plugin Yoast SEO.
Add the Necessary Code
Make sure to install Yoast SEO on your site. You can also write the breadcrumbs code by yourself if you want, and use that, but I think it’s just easier and faster to use the breadcrumbs included in this plugin.
Once you installed and activated Yoast SEO, add this code to your functions.php file in wp-content/themes/your-child-theme-name/ at the end of the file:
Then, add this style in Customizer > Additional CSS or by using your preferred method to add custom CSS:
This will show the breadcrumbs on any page, except the Home page, and it will show like the one that you can see in the Storefront demo site.
Note: I chose to not show the breadcrumbs on the Home page because I don’t think it’s useful, but if for any reason you want to show it, just remove the part
&& ! is_home() from the PHP script to show it also on the Home.
Activate the Breadcrumbs in Yoast SEO
Once the code is ready, you need to activate the breadcrumbs in Yoast SEO, and you can do so by going to SEO > Advanced > Breadcrumbs in your Dashboard.