Html 响应css布局图片

我想实现响应式布局，如第二张图所示。但我得到的是第一张照片

我的CSS代码是：

    @media (max-width: 960px){
.nav{
    width: 100%;
    height:2em;}

#nav-icon{
    width: 100px;
    height: 50px;
}
.container{
    width: 100%;
    margin: 0;
    padding: 3%;
}
.container div{
    display: inline;
    width: 45%;
    margin: 0;
    padding: 1%;

}
.container div img{
    width: 100%;
}

有人能帮我吗？

---

谢谢

我建议您使用的创建响应性布局

创建过程： 使用

col-xs-6 col-sm-6 col-md-6 col-lg-6

---

在第一列中，创建一个全高的

img

。在第二列中，创建两个

img

src，它们将使用

CSS

属性垂直放置。

尝试使用引导网格系统，我们可以轻松制作响应图像

这是你照片的代码。如果根据屏幕宽度缺少任何对齐。使用@media规则修复此问题

引导示例
在此处添加文本
描述

W3.CSS
全页运行
谢谢大家~~~
我想我知道怎么做了。我使用css3的属性：column。（）我认为它与引导网格布局完全相同。
这是我第一次在这里发帖，在这么短的时间内我得到了这么多的答案。你们太棒了！
再次感谢
 我们可以看到你的html吗？请将你的所有代码作为JSFIDLE发布。也看看这一页，很好