使3行上的2行響應（只有HTML和CSS沒有引導）

Question

嘿！ 我想做出下一個響應層，與沒有 bootstrap或其他框架.....我想從零開始。

我想有響應塊，當我調整頁面大小，我想他們要顯示在一列，我想有一個固定的，而是響應菜單了。

我有我的導航欄和我的菜單，但我有問題組織塊。

這是我到目前爲止有：
HTML

<div class="container"> 

    <div class="navbar"> 
     ... 
    </div><!-- navbar --> 

    <div class="menu-left" id="menu-left"> 
     ... 
    </div><!-- menu left --> 

<div class="blocks"> 

    <div class="column-one"> 
     <div class="column-one-first-block"></div> 
     <div class="column-one-second-block"></div> 
    </div> 

    <div class="column-two"> 
     <div class="column-two-first-block"></div> 
     <div class="column-two-second-block"></div> 
    </div> 

    <div class="column-three"> 
     <div class="column-three-first-block"></div> 
     <div class="column-three-second-block"></div> 
    </div> 

</div> 


</div><!-- container --> 

CSS

body{ 
    margin: 0; 
    background-color: #EAEAEA; 
} 

.navbar{ 
    background-color: #009EE0; 
    width: 100%; 
    height: 54px; 
} 

#menu-left{ 
    float: left; 
    position: absolute; 
    height: 100%; 
    width: 230px; 
    background-color: #FFF; 
} 

而對於我沒有相關的事情塊....
謝謝！

Answer 1

您可以使用Media (max-width: /the width under this make block one column/)

<div class="blocks-container"> 

     <div class="blocks"></div> 
     <div class="blocks"></div> 
     <div class="blocks"></div> 
     <div class="blocks"></div> 
     <div class="blocks"></div> 
     <div class="blocks"></div> 

    </div> 

CSS

.blocks-container { 
    width: calc(100% - 230px); 
    height: calc(100% - 54px); 
    position: absolute; 
    top: 54px; 
    left: 230px; 
} 

.blocks { 
    width: 33%; 
    height: 50%; 
    border: 1px solid blue; 
    float: left; 
} 

@media (max-width: 768px) { 
    .blocks { 
     width: 100%; 
    } 
}