Re-arranging flex items for mobile and desktop - html

Question

I'm trying to make the layout below using flex:
Can I make this layout with flex?
.objectref-use .page-header {
display: flex;
flex-direction: row;
}
.objectref-use .page-header .header-col {
flex: 1;
display: flex;
}
.objectref-use .page-header .header-content {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.objectref-use .page-header .header-content .together-content {
flex-wrap: nowrap;
}
.objectref-use .page-header .objectref-title {
margin-right: 8px;
}
.objectref-use .page-header .objectref-title.header-col {
justify-content: flex-start;
}
.objectref-use .page-header .objectref-title .header-content {
flex: 0 1 auto;
background: blue;
}
.objectref-use .page-header .objectref-timeline {
flex: 0 0 35px;
display: flex;
}
.objectref-use .page-header .objectref-timeline .header-content {
background: pink;
flex: 1 1 100%;
}
.objectref-use .page-header .objectref-menu.header-col {
justify-content: flex-end;
}
.objectref-use .page-header .objectref-menu .header-content {
flex: 0 1 auto;
background: green;
}
#media screen and (max-width: 768px) {
.page-header {
flex-direction: column;
}
.page-header .header-row {
flex-direction: row;
}
}
#media screen and (max-width: 480px) {
.page-header {
flex-direction: column;
}
.page-header .header-col {
flex: 1;
}
.page-header .objectef-timeline {
margin: 0;
}
}
<div class="objectref-use">
<div class="page-header">
<div class="header-col objectref-title">
<div class="header-content">
<h1>title here (can be loooong) [block 1]</h1>
<h6>text on next line</h6>
</div>
</div>
<div class="header-col objectref-timeline">
<div class="header-content">timeline [block 3]</div>
</div>
<div class="header-col objectref-menu">
<div class="header-content">
<div class="together-content">
few button groups here [block 2]
</div>
<h6>text on next line</h6>
</div>
</div>
</div>
</div>
This is the current CSS on Codepen. Thanks.

Answer 1

Yes, you can change the order of flex elements with the css order property.
Fiddle
Further you can change the width of flex elements, stack certain ones on top of each other, etc... by adjusting the flex values.
Check out this guide for more information.
Fiddle
ul {
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
padding: 0;
margin: 0;
margin-bottom: 25px;
}
li {
background: lightblue;
text-align: center;
flex: 0 1 50%;
list-style: none;
}
.one {
background: green;
-webkit-order: 2;
order: 2;
}
.two {
background: olive;
-webkit-order: 3;
order: 3;
}
.three {
-webkit-order: 1;
order: 1;
flex: 1 0 100%;
}
.four, .five, .six {
border: 1px solid red;
flex: 1;
}
.seven, .eight, .nine {
border-bottom: 1px solid white;
flex: none;
display: block;
width: 100%;
}
<ul>
<li class="one">1</li>
<li class="two">2</li>
<li class="three">3</li>
</ul>
<ul>
<li class="four">1</li>
<li class="five">2</li>
<li class="six">3</li>
</ul>
<ul>
<li class="seven">1</li>
<li class="eight">2</li>
<li class="nine">3</li>
</ul>