Html 水平排列自动创建的具有响应性的div

我有以下代码：

{{com.description}

{{com.value}编号：'1.2-2'}{{com.units}

{{com.lowlimit|number:'1.0-0'} {{com.highlimit}编号：'1.0-0'} 外层的系统如下所示：

.底部容器{ 边缘顶端：40px； } .底部数据卡内容{ 左边距：50像素； 弹性：1； 宽度：350px； 光标：指针； 盒影：0 8px 10px 1px rgba0,0,0,0.14,0 3px 14px 2px rgba0,0,0,0.12,0 5px 5px-3px rgba0,0,0,0.3； 边界半径：20px； 填充：0px 10px 0px 10px； 边缘底部：30px； } 这将创建5个垂直对齐的div，每个div之间有一个间隙。我想在桌面上水平排列，但在较小的屏幕上垂直排列

---

我如何做到这一点？

请在样式中添加此项

css

---

你有床单吗？我是说css文件？@Manikandan2811添加了查看和

.bottom-container::before,
.bottom-container::after {
    content: "";
    display: table;
    clear: both;
}
.bottom-data-cards-content {
    width: 20%;
    float: left;
    padding: 0px 20px;
}
@media only screen and (max-width: 767px) {
    .bottom-data-cards-content {
        width: 100%;
    }
}