перестановке гибких элементов для мобильных и настольных

Question

Я пытаюсь сделать макет ниже с помощью гибкого трубопровода:

Могу ли я сделать этот макет с гибким?

.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>

Это the current CSS on Codepen. Благодарю.

Answer 1

Да, вы можете изменить order of flex elements на css order.

Fiddle

Далее вы можете изменить ширину гибких элементов, стек некоторые из них друг на друга, и т.д. ... путем корректировки flex значения.

Отъезд 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>