使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%; 
    } 
}