响应式 div 布局重排

Question

我一直在为一家本地公司独立设计网站，但我一直不知道如何使我的布局/设计能够响应式地工作。截至目前，我的内容与此类似：

但是，随着浏览器屏幕的缩小，或者如果浏览器的分辨率已经变小，第 3 项会以 100% 的宽度移动到第 1 项和第 2 项下方。虽然第 1 项和第 2 项都将彼此内联。很像这样：

最初，我将两个包装 div（1 和 2）都设置为 display: inline-block。但是我找不到任何类型的研究表明（在相应的媒体查询中更改 inline-block div 容器 2 之后）子元素可以与单独的元素内联，而同一容器中的另一个子元素不会。最近，我开始讨论使用 display: table 、 display: table-row 和 display: table-cell 来尝试以类似表格的布局组织内容，但我找不到将项目 1 和项目 2 分配到的方法排除第 3 项时，他们自己的行。

老实说，自从我不得不处理任何 HTML/CSS/JavaScript/等内容以来已经有一段时间了，所以我有点生疏了。我希望看看是否有人能指出我正确的方向或给我一些见解。谢谢。

Answer 1

我使用流体设计和基本 div 你可以在这里看到https://jsfiddle.net/74x5975j/6/

<div class="group">
    <div class="box-1">BOX 1</div>
    <div class="box-2">BOX 2</div>
    <div class="box-3">BOX 3</div>
</div>

这是带有媒体查询的 CSS：

.group {
width: 600px;
height: 300px;    

}
.box-1 {
    width: 50%;
    height: 100%;
    float: left;
    background-color: gray;
    text-align: center;
    float: left; 
}
.box-2 {
    width: 50%;
    height: 50%;
    float: left;
    background-color: blue;
    text-align: center;
    float: left;    
}

.box-3 {
    width: 50%;
    height: 50%;
    float: left;
    background-color: red;
    text-align: center;
    float: left;    
}
@media only screen and (max-width: 599px){
.group {
    width: 100%;
    height: 450px;    
}
.box-1 {
    height: 66.666%;
}
.box-2 {
    height: 66.666%;  
}

.box-3 {
    width: 100%;
    height: 33.333%;
}
}