Заказ 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; 
    } 
}