Javascript 响应性方形图像和文本网格

当图像和文本内容对齐出现故障时，出现了一个问题

基本上，我想一次保存图像和文本，在移动布局中一个接一个，在平板布局中一个图像和相关文本应该一个接一个地水平对齐，但是它崩溃了桌面布局正常

这是代码

.sq关于main{
边缘底部：80px；
}
.s-about-col-area{
显示：块；
利润率：10%自动；
溢出：隐藏；
}
.s-about-col-areas：之后{
内容：“；
明确：两者皆有；
显示：块；
}
.s-about-col{
宽度：100%；
浮动：左；
位置：相对位置；
垫底：100%；
}
@介质（最小宽度：768px）{
.s-about-col{
宽度：计算（100%/2）；
填料底部：计算（100%/2）；
}
}
@介质（最小宽度：1200px）{
.s-about-col{
宽度：计算值（100%/4）；
浮动：左；
位置：相对位置；
填料底部：计算（100%/4）；
}
}
.s-about-col.s-about-col-content{
宽度：钙（100%）；
身高：钙（100%）；
/*利润率：8px*/
/*填充：16px*/
位置：绝对位置；
边界半径：2px；
背景色：#ffffff；
/*盒影：0 2px 5px rgba（0,0,0,0.26）*/
}
.image col.s-about-col-content img{
宽度：100%；
身高：100%；
对象匹配：覆盖；
-o-对象配合：盖；
}
.s-about-col-content i{
位置：绝对位置；
左：45像素；
底部：45px；
字体大小：20px；
线高：20px；
颜色：#6464；
边框：1px实心#6464；
填充：10px；
光标：指针；
}
.text col{
显示：表格；
}
.text col.text col内容{
填充：30%45px 45px 45px；
身高：100%；
显示：表格单元格；
文本对齐：左对齐；
垂直对齐：中间对齐；
}
.文本列.文本列内容h2{
字体系列：“Helvetica Bold”，无衬线；
}
.text col.text col content p{
字体系列：“Roboto”，无衬线；
字体大小：20px；
颜色：#6565；
}
.text col.text col content.l箭头：：之前{
内容：“；
位置：绝对位置；
最高：50%；
左：-25px；
转化：translateY（-50%）；
宽度：0；
身高：0；
边框顶部：25px实心透明；
边框底部：25px实心透明；
右边框：25px实心#ffffff；
z指数：2；
}
.text col.text col content.r-arrow:：before{
内容：“；
位置：绝对位置；
最高：50%；
右：-25px；
转化：translateY（-50%）；
宽度：0；
身高：0；
边框顶部：25px实心透明；
边框底部：25px实心透明；
左边框：25px实心#ffffff；
z指数：2；
}

我们是谁
我们努力超越客户，建立一种建立在信任和信心基础上的关系

使命与愿景
我们努力超越客户，建立一种建立在信任和信心基础上的关系

哲学
我们努力超越客户，建立一种建立在信任和信心基础上的关系

成就
我们努力超越客户，建立一种建立在信任和信心基础上的关系

我会重新考虑结构，因为你的8个盒子基本上是4个盒子，每个盒子里有2个零件。然后，您可以使用float left/right控制序列，如下所示：

.sq关于main{
边缘底部：80px；
}
.s-about-col-area{
显示：块；
利润率：10%自动；
溢出：隐藏；
}
.s-about-col-areas：之后{
内容：“；
明确：两者皆有；
显示：块；
}
.s-about-col{
宽度：100%；
位置：相对位置；
垫底：100%；
}
.左.s-about-col{
浮动：左；
}
.右。s-about-col{
浮动：对；
}
@介质（最小宽度：768px）{
.s-about-col{
宽度：计算（100%/2）；
填料底部：计算（100%/2）；
}
}
@介质（最小宽度：1200px）{
.s-about-col{
宽度：计算值（100%/4）；
浮动：左；
位置：相对位置；
填料底部：计算（100%/4）；
}
}
.s-about-col.s-about-col-content{
宽度：钙（100%）；
身高：钙（100%）；
/*利润率：8px*/
/*填充：16px*/
位置：绝对位置；
边界半径：2px；
背景色：#ffffff；
/*盒影：0 2px 5px rgba（0,0,0,0.26）*/
}
.image col.s-about-col-content img{
宽度：100%；
身高：100%；
对象匹配：覆盖；
-o-对象配合：盖；
}
.s-about-col-content i{
位置：绝对位置；
左：45像素；
底部：45px；
字体大小：20px；
线高：20px；
颜色：#6464；
边框：1px实心#6464；
填充：10px；
光标：指针；
}
.text col{
显示：表格；
}
.text col.text col内容{
填充：30%45px 45px 45px；
身高：100%；
显示：表格单元格；
文本对齐：左对齐；
垂直对齐：中间对齐；
}
.文本列.文本列内容h2{
字体系列：“Helvetica Bold”，无衬线；
}
.text col.text col content p{
字体系列：“Roboto”，无衬线；
字体大小：20px；
颜色：#6565；
}
.text col.text col content.l箭头：：之前{
内容：“；
位置：绝对位置；
最高：50%；
左：-25px；
转化：translateY（-50%）；
宽度：0；
身高：0；
边框顶部：25px实心透明；
边框底部：25px实心透明；
右边框：25px实心#ffffff；
z指数：2；
}
.text col.text col content.r-arrow:：before{
内容：“；
位置：绝对位置；
最高：50%；
右：-25px；
转化：translateY（-50%）；
宽度：0；
身高：0；
边框顶部：25px实心透明；
边框底部：25px实心透明；
左边框：25px实心#ffffff；
z指数：2；
}

@media (max-width: 767px) {
.s-about-col{padding-bottom: 0;}
.s-about-col .s-about-col-content{position: relative;}
}