Html 当缩小尺寸以获得响应时，如何将这些图像放置在徽标下？

我在右边的标题中有一个部分，除了右边的图像块是如何移动的外，它可以很好地向下缩放。图像的大小调整得很好，但一旦我开始缩小，它们就会进入logo div，然后放在上面

我如何将它们放置在徽标下方并相应地对齐，同时保持在标题中，而不在达到某个屏幕大小时将显示设置为无

是这些图像/徽章的jsbin链接。现场网站在Wordpress中，代码太多，无法发布。如果你只是使用Firebug或者开发工具

是站点的实时版本

另请注意：我在现场站点上启用了-190px的余量

---

这里有一个屏幕截图仅供参考：

我设法解决了这个问题。我添加了一个单独的媒体查询，如下所示：

    @media screen and (max-width: 479px) {

    .badges-container {
    position: relative;
    text-align: center;
    margin-top: 0px

    }

    .badges img {
     width: 19%;
}   

---

首先，您可以在

.badges容器上取消
边距：-190px
。然后设置
.badges{display:flex}
而不是
内联块
。然后删除
上的
width
指令.badges img
。这可能是一个很好的开始。如果我这样做，它会把所有的东西都放到logo div下面，然后图像就不再有响应了。请看oops。忘记将
的父
div.table-row
更改为
显示：flex
。在较小的尺寸上仍然存在一些碰撞，但是垂直的东西不再是问题。