Html 在特定屏幕宽度上居中显示子项div

我正在努力使我的应用程序具有响应性。原始css如下所示：

.footer-container {
  width: 100%;
  min-height: 260px;
  height: auto;
  background: black;
  color: white;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  position: absolute;
}

输出如下：

但当屏幕宽度达到1020px时，我希望它们彼此在下面

我尝试制作display:flex display:block:

@media only screen and (max-width: 1020px) {
  .footer-container {
    width: 100%;
    min-height: 260px;
    height: auto;
    background: black;
    color: white;
    display: block;
    text-align: center;
    justify-content: center;
    position: absolute;
  }
}

但结果是：

---

我还尝试了flex-direction:row，但也没有成功，它几乎没有改变任何事情。

在使用媒体查询的解决方案下面使用基本HTML。首先是移动设备，当屏幕大小超过1024像素时，媒体查询开始

.footer容器{
宽度：100%；
显示器：flex；
柔性包装：包装；
}
.联系，
订阅
.跟随{
宽度：100%；
显示器：flex；
证明内容：中心；
}
@介质（最小宽度：1024px）{
.footer容器{
柔性包装：无包装；
证明内容：中心；
}
.联系，
订阅
.跟随{
宽度：自动；
}
}

联系我们
订阅
跟我们来

如果您希望元素位于彼此下方，则需要为

@media

编写

display:flex

和

flex direction:column