How to adapt the left sidebar for mobile devices?

Question

css

Hi friends.
There is a big question here.
How to adapt the left sidebar for mobile?
And actually how to do it humanly?
By the way, for example, I have Bitrix.
Well, respectively, there is a header workarea and footer. By template standards, so to speak.
Ideally and according to the rules, I should put the left sidebar in the header.
It seems to have thrown it in:
codepen.io/WebSiberia/pen/YWrRRk
So, attention to the question, how can I do everything in a human way and make it look beautiful on the phone.
Or at least send me in the direction of the correct literature or lesson.
I want everything to look right.
And learn to type things like that normally.
Thanks in advance for advice and help.

Answer 1

In your case, Bitrix has nothing to do with it. This is a platform. It has no effect on the layout of the project.
I see that the layout in the bootstrap example. Display block styles in css
On bootstrap, the position of blocks can be set with preset styles getbootstrap.com/css/#grid-column-ordering