Simple layout via Flex Box - css

Question

I am trying to make a common html structure for my website using bootstrap 4, the common elements are: sidebar, h1 and content.
The main task is arranging them properly based on the screen size:
In mobile view they should go in the following order: h1, sidebar and content, like this:
In desktop view they should go like this:
Here is my codepin: https://codepen.io/anon/pen/ejLroV

Answer 1

As said earlier in above comments, you can achieve that using - bootstrap order-classes https://getbootstrap.com/docs/4.1/layout/grid/#order-classes, pleae have a look at the below working snippet, hope it helps :)
aside {
background: grey;
height: 300px;
}
h1 {
background: green;
}
section {
background: #c1c1c1;
height: 300px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row d-lg-block">
<h1 class="col-12 order-1 col-lg-9 float-lg-right order-lg-2">H1 Title</h1>
<aside class="col-12 order-2 col-lg-3 float-lg-left order-lg-1">Sidebar</aside>
<section class="col-12 order-3 col-lg-9 float-lg-right order-lg-3">Content</section>
</div>
</div>