Flexbox訂購。分割列

Question

我想要實現以下功能，使用Flexbox更改移動/桌面的頁面佈局。

我想達到以下使用Flexbox的順序：

http://i.stack.imgur.com/iBXpJ.jpg

希望這是有道理的？

Answer 1

這是使用flexbox進行此操作的一種方法。 Here is the working demo.

<div class="main-container"> 
    <div class="item menu">Menu</div> 
    <div class="item sidebar">Sidebar</div> 
    <div class="item content">Content</div> 
</div> 

.main-container { 
    width: 100vw; 
    height: 100vh; 
    display: flex; 
    flex-direction: column; 
    flex-wrap: wrap; 
} 

.item { 
    border: 5px solid gray; 
} 

.menu { 
    flex-basis: 200px; 
    width: 200px; 
} 

.sidebar { 
    flex-grow: 1; 
    width: 200px; 
} 

.content { 
    flex-basis: 100%; 
    width: calc(100% - 200px); 
} 

@media (max-width: 600px) { 
    .main-container { 
    flex-wrap: no-wrap; 
    height: 100%; 
    } 

    .item { 
    width: 100%; 
    } 

    .sidebar, .content { 
    flex-basis: auto; 
    } 
}