Html 媒体查询和使网格系统响应

我对媒体查询有点熟悉，但当涉及到不同大小和形状的多个div时，我完全不知所措。所以，如果有人愿意带我走过这个过程，那将是非常棒的。或者只是给我一些建议，这就是我真正想要的！现在我有7个独立的div，所有的位置都是我想要的，只是不知道如何保持它对不同设备的响应

.wrapper{
最大宽度：900px；
保证金：0自动；
}
.wrapper>div{
背景颜色：浅珊瑚；
填充：1em；
颜色：白色；
}.包装纸{
显示：网格；
网格模板列：重复（3，1fr）；
栅极间隙：15px；
网格自动行：最小最大值（100px，自动）；
}
.一{
网格柱：1；
网格行：1；
}
1.悬停{
不透明度：.6；
}
.2：悬停{
不透明度：.6；
}
.三：悬停{
不透明度：.6；
}
.2{
网格柱：2；
网格行：1/3；
}
.2：悬停{
不透明度：.6；
}
.三{
网格柱：1；
网格行：2/3；
}
.4{
网格柱：3；
网格行：1/4；
}
.5{
网格柱：1/3；
网格行：3；
}
.6{
网格柱：2/4；
网格行：4；
}
.7{
网格柱：1；
}

标题在这里
标题在这里
三
四
五
六
七

---

我举了一个可能的解决方案的例子。如果将显示更改为block on mobile，则会将每个div堆叠在一起。如果在JSFIDLE中更改屏幕的大小，您可以看到操作中的更改。我还在每个div的底部添加了一些边距，因为它们相互接触。如果你需要进一步的帮助，请告诉我

我怎样才能让它们堆叠在一起，然后使用媒体查询？太好了！最后一件事。。。如何在每个框中获得不同的图像？因此，在CSS中，您可以使用“背景图像”更改图像。您可以在下面的链接中看到更多信息。我遵循了上面列出的信息，但每次我在css中为某个div放置一个图像时，该图像都会被超放大和模糊，我必须手动将其定位以使其居中或填充某个块。我怎样才能避免这种情况呢？下面是一个例子：，狗的图像被放大了，然后在移动视图中看起来很好。我怎样才能着手解决这个问题？

@media only screen and (max-width: 768px) {
 .wrapper {
   display: block;
 }
 .margin-bot {
   margin-bottom: 2px;
 }
}