Whats the best way to switch the order of sidebar and content blocks on breakpoints?

drupal/bootstrap_barrio 5.5.9
This is my global.js file. It doesn't display a reordering for the first column on a small device.

/**
* @file
* Global utilities.
*
*/
(function ($, Drupal) {

'use strict';

Drupal.behaviors.my_theme = {
attach: function (context, settings) {

}
};

})(jQuery, Drupal);

let MOBILE_BREAKPOINT = 692;
let width = 0, prevWidth = 0;

function initWindowResize() {
$( window ).resize(function() {
let width = $( window ).width();
// console.log("window resized: ", width);

if ((width < MOBILE_BREAKPOINT) && (prevWidth >= MOBILE_BREAKPOINT)) {
console.log("switching to mobile");
$('.sidebar_first').removeClass('order-first');
$('.main-content').addClass('order-first');
}

if ((width > MOBILE_BREAKPOINT) && (prevWidth <= MOBILE_BREAKPOINT)) {
console.log("switching to desktop");
$('.main-content').removeClass('order-first');
$('.sidebar_first').addClass('order-first');
}

prevWidth = width;
});
}

I suggest to alter region classes on your sub theme preprocess, applying Bootstrap layout classes

I wanted to display one column for small devices, with content first (full width); then display content on the left and first sidebar to the right for tablets, and three columns with content in the center for larger screens. I created a subtheme, with a new page.html.twig template, and included the following code block:
{% block content %}

{% endblock %}