Using Flex CSS and Bootstrap for a responsive layout

Question

I've been playing with fully responsive layouts for a while now across laptop, tablet, and mobile phone sizes, but the layout below is giving me difficulties.

I was using a bootstrap grid layout, but since it has two columns, the second one slides below the main content section on the left when the width decreases. As shown in the screen captures below, I wish to divide everything up.

This is the starting view:

This is what I want to happen:

This would be the mobile phone view:

As a result, when testing, the broad view will be condensed, and I want it to switch to the mobile view, where the top sidebar extends above the main content and is the same width as the main content, and the bottom sidebar does the same for the bottom.

Although it is simple to place both sidebars at the bottom, I want to investigate the potential of dividing them up.

I'm using bootstrap5+, flexbox, CSS3, and CSS3 without any plugins or javascript for testing.