如何使 Flex Row 响应式 Bootstrap 4

目前页面如下所示：

现在，调整大小到移动屏幕时，弹性框会溢出容器：

Html:

       <div id="bars" class="d-flex flex-row text-white  text-center">
            <div class="port-item p-4 bg-primary" data-toggle="collapse" data-target="#home">
                <i class="fa fa-home d-block"></i> Home
            </div>
            <div class="port-item p-4 bg-success" data-toggle="collapse" data-target="#resume">
                 <i class="fa fa-graduation-cap d-block"></i> Resume
            </div>
            <div class="port-item p-4 bg-warning" data-toggle="collapse" data-target="#work">
                 <i class="fa fa-folder-open d-block"></i> Work
            </div>
            <div class="port-item p-4 bg-danger" data-toggle="collapse" data-target="#contact">
            <i class="fa fa-envelope d-block"></i> Contact
            </div>
            </div>

CSS，我尝试使用媒体但没有任何改变

.port-item {
width: 30%;
}

@media(min-width: 768px) {
  #bars {
    flex-direction: column;
  }
}

如何使它们适合容器或使它们显示在列上

不确定您是否需要使用 CSS 对其进行排序，因为 Bootstrap 类应该涵盖此内容。

将 Flex 类“d-flex flex-row”替换为“d-flex flex-column d-sm-flex flex-sm-row”

您的 4 件物品将自动堆叠在移动设备上并并排放置在上面