How to correctly move a block from aside when adaptive?

Question

css

I'm making up a layout that has a sidebar with a catalog and news, a section column to the right of the sidebar.
On the tablet and mobile screen width, the catalog is hidden and called by the menu, and the news block is placed between the sections.

I tried to do it on some flexes, but it didn’t work out, float came to the rescue.
Code example: https://codepen.io/viseko/pen/zYZExKp

Please tell me if there are more beautiful ways to perform such layout? And how "kosher" is it to mix the aside with the rest of the page sections?

Answer 1

I figured out how to do it on flex: https://codepen.io/viseko/pen/VwpMeGJ
But I dismissed the idea of ​​wedge aside between the sections, so I decided to put the news section between the other sections and move it to the aside with a script on desktop resolutions.