Html flexbox和屏幕大小的问题

我有两个问题，希望有人能提供一些指导。首先，我有一行很棒的字体图标，我正在使用flexbox格式化这些图标。当屏幕缩小时，我想变换flexbox，使图标垂直，而不是水平挤压。我用transform尝试了不同的方法，但似乎无法使其正常工作：

正常宽度：

屏幕缩小时：

此外，我想在每个图标下面添加一些文本，以便通知用户他们正在单击什么。为了使代码正确对齐，我必须向代码中添加什么

这是我目前的代码：

.包装纸{ 显示器：flex； 对正内容：空间均匀； 宽度：100%； } .包装纸i{ 颜色：$过期； 边界：3倍固体美元逾期； 边界半径：25px； 填充：18px； 过渡：所有0.5s线性； } .i:悬停{ 背景：逾期未付； 颜色：$颜色最浅； 箱影：逾期0美元； -webkit动画：rubberBand 1s； 动画：rubberBand 1s； } 您应该使用flex-direction:column将水平flexbox转换为垂直flexbox

.wrapper{
  display:flex;
  justify-content:space-evenly;
  width:100%;
}

@media screen and (max-width: 768px) {
  .wrapper {
    flex-direction: column;
  }
}

关于放一些文字，如果我理解正确，你应该这样做：

---

：

谢谢加布里埃尔！我不得不把你的css弄得一团糟，但这确实帮了大忙！

<div class="wrapper">
  <div>
    <i class="fa fa-clipboard fa-3x" aria-hidden="true"></i>
    <h3>Description</h3>
  </div>
  <div>
    <i class="fa fa-building fa-3x" aria-hidden="true"></i>
    <h3>Description</h3>
  </div>
  <div>
    <i class="fa fa-users fa-3x" aria-hidden="true"></i>
    <h3>Description</h3>
  </div>
  <div>
    <i class="fa fa-university fa-3x" aria-hidden="true"></i>
    <h3>Description</h3>
  </div>
  <div>
    <i class="fa fa fa-file-pdf-o fa-3x" aria-hidden="true"></i>
    <h3>Description</h3>
  </div>
</div>