Html 在我的页脚中，当我的屏幕宽度小于700像素时，如何将社交图标分成两行？

我有6个社交网站图标在我的页脚，与flexbox我把所有在同一行。 当我的屏幕达到700px（媒体查询）时，我希望它们改变并分成两行（3行向上，3行向下）

HTML:

请注意：我将值“flex direction:column”指定给我的ID页脚，因为我有一个多级页脚，另一个页脚是“合法”页脚。 谢谢大家!

添加：

display: flex;
flex-wrap: wrap;

---

在图标分区中。

如果要确保3个顶部和3个底部，也可以为该分区添加最大宽度。

footer{
  width: 100%;
  display: flex;
  flex-direction: column;
}

.footer-socials{
  background-color: #196b19;
  width: 100%;
  }

.fa-youtube-square, .fa-facebook-square, .fa-instagram, .fa-vk, .fa- 
twitter-square, .fa-linkedin {
  color: #fff;
  font-size: 1.3rem;
}

ul, li{
  list-style: none;
  justify-content: center;
  display: flex;
  padding: 0.5rem;
}

display: flex;
flex-wrap: wrap;