How to position head, main, aside?

Question

Flexbox

The first picture shows how the elements are arranged at the moment, the second one as we would like.
Questions: Are the elements semantically correct? And how to set their position as in the second example (I read and tried some options, but they do not work).

Answer 1

Semanically - right, only semantics is not only about the visual arrangement of elements, but also about the correct use of tags (one h1 per page, the use of html5 tags, etc.), but in general - everything is ok.
And for example, you can arrange it like this: Codepen .

Answer 2

everything is quite simple, although the video is old, it works https://www.youtube.com/watch?v=pqYyqKfbM6c&t=130s