Wrong order of css in Bootstrap Barrio Subtheme

Problem/Motivation

Wrong order of css in Bootstrap Barrio Subtheme

I work on many installations with a package of Bootstrap (Barrio) and a custom subtheme + paragraph + layout paragraph. In the subtheme, I have the following settings for breakpoints.

info.yml:

libraries:
- custom_barrio/bootstrap
- custom_barrio/global-styling
- custom_barrio/small-device-styling
- custom_barrio/medium-device-styling
- custom_barrio/large-device-styling
- custom_barrio/extra-large-device-styling
- custom_barrio/wide-device-styling

libraries.yml

global-styling:
  version: VERSION
  js:
    js/global.js: {}
  css:
    component:
      css/style.css: {}
      css/colors.css: {}
      css/edit.css: {}
      css/add.css: {}
small-device-styling:
  css:
    theme:
      css/smalldevice.css: {media: all and (min-width: 576px)}
medium-device-styling:
  css:
    theme:
      css/mediumdevice.css: {media: all and (min-width: 768px)}
large-device-styling:
  css:
    theme:
      css/largedevice.css: {media: all and (min-width: 992px)}
extra-large-device-styling:
  css:
    theme:
      css/extralargedevice.css: {media: all and (min-width: 1200px)}
wide-device-styling:
  css:
    theme:
      css/widedevice.css: {media: all and (min-width: 1650px)}
 
bootstrap:
  js:
    /libraries/bootstrap/js/bootstrap.min.js: {}
  css:
    component:
      /libraries/bootstrap/css/bootstrap.min.css: {}
bootstrap_cdn:
  js:
    //cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js: {}
    //stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js: {}
  css:
    component:
      //stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css: {}
color.preview:
  version: VERSION
  css:
    theme:
      color/preview.css: {}
  js:
    color/preview.js: {}
  dependencies:
    - color/drupal.color
print-profile:
  css:
    theme:
      css/print.css: {}

breakpoint.yml

custom_barrio.all-devices-styling:
  label: all-devices-styling
  mediaQuery: ''
  weight: 0
  multipliers:
    - 1x    
    - 2x
custom_barrio.small-device-styling:
  label: small-device-styling
  mediaQuery: 'all and (max-width: 576px)'
  weight: 0
  multipliers:
    - 1x    
    - 2x
custom_barrio.medium-device-styling:
  label: medium-device-styling
  mediaQuery: 'all and (min-width: 768px)'
  weight: 1
  multipliers:
    - 1x
    - 2x
custom_barrio.large-device-styling:
  label: large-device-styling
  mediaQuery: 'all and (min-width: 992px)'
  weight: 2
  multipliers:
    - 1x
    - 2x
custom_barrio.extra-large-device-styling:
  label: extra-large-device-styling
  mediaQuery: 'all and (min-width: 1200px)'
  weight: 3
  multipliers:
    - 1x
    - 2x
custom_barrio.wide-device-styling:
  label: wide-device-styling
  mediaQuery: 'all and (min-width: 1400px)'
  weight: 3
  multipliers:
    - 1x
    - 2x
    - 2x

The order of css in ONE of the installation is wrong:

<link rel="stylesheet" media="all and (min-width: 1200px)" href="/themes/custom/custom\_barrio/css/extralargedevice.css?sroev9" />

<link rel="stylesheet" media="all and (min-width: 992px)" href="/themes/custom/custom\_barrio/css/largedevice.css?sroev9" />

<link rel="stylesheet" media="all and (min-width: 768px)" href="/themes/custom/custom\_barrio/css/mediumdevice.css?sroev9" />

<link rel="stylesheet" media="all and (min-width: 576px)" href="/themes/custom/custom\_barrio/css/smalldevice.css?sroev9" />

<link rel="stylesheet" media="all and (min-width: 1600px)" href="/themes/custom/custom\_barrio/css/widedevice.css?sroev9" />

The difference: the installation where it does not work is running Drupal 10.4.1 and Barrio 5.5.19. The others are running, for example, Drupal 10.2.0 and Barrio 5.5.16.
Bootstrap library is Version 5.0.1

I'm probably missing something? Can you see an error?
What can i still try?