Html 我的引导4列col-sm-6行未堆叠在移动设备上

我使用的是Bootstrap4，在移动视图中，我的列很难堆叠在一起。我每行有两个col-sm-6。我相信这是一个简单的解决办法，但我似乎不明白。任何帮助都将不胜感激，谢谢

这是该网站的链接

/*--概览标题一--*/
h3.1.1-1头概述{
边缘底部：5px；
字号：500；
字体系列：“OSP-DIN”，无衬线；
字体风格：粗体；
字体大小：60px；
字母间距：2px；
边缘顶部：10px；
颜色：#E7643B；
}
/*--概览标题二--*/
h3.概述-标题2{
边缘底部：5px；
字号：500；
字体系列：“OSP-DIN”，无衬线；
字体风格：粗体；
字体大小：60px；
字母间距：2px；
边缘顶部：10px；
颜色：#777；
}
/*--概览标题三--*/
h3.概述-标题3{
边缘底部：5px；
字号：500；
字体系列：“OSP-DIN”，无衬线；
字体风格：粗体；
字体大小：60px；
字母间距：2px；
边缘顶部：10px；
颜色：#812E14；
}
/*--概述子标题--*/
h4{
字体系列：“Bebas Neue”，无衬线；
字体大小：40px；
颜色：#9B3718；
字号：600；
字体风格：普通；
字母间距：1px；
页边距底部：0；
边缘顶部：30px；
}
/*--概述段落--*/
p、 铅2{
字体大小：25px；
颜色：#333；
字体大小：粗体；
字母间距：1px；
字体风格：普通；
字体系列：“Bebas Neue”，无衬线；
填充顶部：20px；
}
/*--页脚段落--*/
p、 铅3{
字体大小：20px；
颜色：#333；
字体大小：300；
字母间距：1px；
字体风格：普通；
字体系列：“Bebas Neue”，无衬线；
}
/*--概述一---*/
第#节概述1{
背景：-webkit线性梯度（左，#E7643B 50%，#fff 50%）；
背景：-o-线性梯度（左，#E7643B 50%，#fff 50%）；
背景：线性梯度（向右，#E7643B 50%，#fff 50%）；
宽度：100%；
高度：700px；
}
/*--概述二---*/
第#节概述2{
背景：-webkit线性梯度（左，#fff 50%，#777 50%）；
背景：-o-线性梯度（左，#fff 50%，#777 50%）；
背景：线性梯度（向右，#fff 50%，#777 50%）；
宽度：100%；
边框底部：2倍实心#eee；
高度：700px；
}
/*--概述三---*/
第#节概述3{
背景：-webkit线性梯度（左，#812E14 50%，#fff 50%）！重要；
背景：-o-线性梯度（左，#812E14 50%，#fff 50%）！重要；
背景：线性梯度（向右，#812E14 50%，#fff 50%）！重要；
宽度：100%；
高度：700px；
}
.概述包装器{
-ms flex首选尺寸：0；
弹性基准：0；
-webkit-box-flex:1；
-ms-flex阳性1例；
柔性生长：1；
最大宽度：100%；
高度：650px；
}

概览标题1
副标题
洛雷姆·伊普苏姆·多洛尔·塞特·阿梅特，一位杰出的领导者。塞德·乌特·伊尼姆·库苏斯、射手座的图尔皮斯、康格·利奥。Morbi sed leo Concertetur，拍卖人nisl vitae，sodales nunc
洛雷姆·伊普苏姆·多洛尔·塞特·阿梅特，一位杰出的领导者。塞德·乌特·伊尼姆·库苏斯、射手座的图尔皮斯、康格·利奥。Morbi sed leo Concertetur，拍卖人nisl vitae，sodales nunc.
概览标题二
副标题
洛雷姆·伊普苏姆·多洛尔·塞特·阿梅特，一位杰出的领导者。塞德·乌特·伊尼姆·库苏斯、射手座的图尔皮斯、康格·利奥。Morbi sed leo Concertetur，拍卖人nisl vitae，sodales nunc
洛雷姆·伊普苏姆·多洛尔·塞特·阿梅特，一位杰出的领导者。塞德·乌特·伊尼姆·库苏斯、射手座的图尔皮斯、康格·利奥。Morbi sed leo Concertetur，拍卖人nisl vitae，sodales nunc
概览标题三
副标题
洛雷姆·伊普苏姆·多洛尔·塞特·阿梅特，一位杰出的领导者。塞德·乌特·伊尼姆·库苏斯、射手座的图尔皮斯、康格·利奥。Morbi sed leo Concertetur，拍卖人nisl vitae，sodales nunc
洛雷姆·伊普苏姆·多洛尔·塞特·阿梅特，一位杰出的领导者。塞德·乌特·伊尼姆·库苏斯、射手座的图尔皮斯、康格·利奥。Morbi sed leo Concertetur，拍卖人nisl vitae，sodales nunc

对于响应性强的内容，您可能错过了非常重要的

meta

：

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

---

在这种情况下，要使其响应，只需将

img流体

类添加到图像中即可。就这样

编辑： 它不适合你的主要原因是：

您有太多不必要的css攻击。

您尝试使用自定义css所做的许多事情都可以（而且应该）单独使用本机引导类来完成。因为定制css黑客倾向于需要更多的css黑客来修复由原始css黑客造成的问题

我的建议是： 删除所有自定义css，使用下面我的代码片段中的代码作为起点，然后开始逐行添加自定义css，看看自定义css在哪里打破引导。（我可以告诉你这一点，但我认为你更愿意自己学习）只有一个提示：Bootstrap4默认是基于flexbox的。干预这不是一个好主意

另外：您可能还希望让引导程序为小屏幕重新排序一些图像（如果您希望图像始终显示在相应部分的文本之前）。但这不是问题的一部分

最后，对于

容器流体

，不需要单独的

div

。您可以将该类直接添加到

部分

s中，并去掉

div

s。引导类可以添加到任何合适的HTML元素中，例如

节
，