Html 在响应式设计中，无法在一行中放置两个div

我有一个网页，这是专为适应移动和网络。我在那页有一个页脚，页脚由4列组成（每列有25%的宽度）。当移动模式被触发时，我已经将每列的宽度设置为50%，这样页脚就被分成两行（每行有两列）。为了实现这一点，我给了列两个类名。在CSS中媒体下的一个类中，我指定它在移动视图中仅占50%的宽度。然而，即使CSS在mobile view中的每一列都得到反映，它仍然占据了100%的宽度，并生成4行，每一行都有一列。我已经附上了截图和代码。有人能指出我错在哪里吗

/*******默认值*******/
导航、页眉、页脚
{
显示：块；
}
身体
{
线高：1；
保证金：0；
}
标签
{
字体大小：35px；
字号：600
}
P
{
字号：28px；
线高：1.2；
}
第p条
{
字体大小：35px；
填充：20px；
}
/********导航条*******/
导航
{
宽度：100%；
保证金：0；
}
导航ul
{
背景色：#eee；
溢出：隐藏；
保证金：0；
填充：0；
}
ul.topnav li
{
列表样式：无；
浮动：左；
保证金：0；
填充：0；
}
ul.topnav li.topnav-right
{
浮动：对；
}
ul.topnav li a
{
显示：块；
文字装饰：无；
最小高度：16px；
文本对齐：居中；
填充：14px；
文本转换：大写；
颜色：#665；
}
ul.topnav李a：悬停
{
背景色：#0000ff；
颜色：#fff；
}
ul.topnav li.dropdownCon
{
显示：无；
}
按钮
{
字体大小：32px；
字号：700；
颜色：#fff；
背景色：#0069ff；
填充：15px 60px；
显示：块；
文本对齐：居中；
保证金：5px；
边界半径：7px；
}
button.learnMore
{
显示：块；
保证金：自动；
}
.集装箱
{
宽度：100%；
保证金：自动；
垫面：4%；
垫底：4%；
背景：
}
/********自定义样式*******/
#第1节-坡度
{
背景#076DFF；
背景图像：-webkit线性梯度（#076DFF，#65A5FF）；
背景图像：-o-线性梯度（#076DFF，#65A5FF）；
背景图像：-moz线性梯度（#076DFF，#65A5FF）；
背景图像：线性梯度（#076DFF，#65A5FF）；
}
分区箱
{
利润率：24px；
文本对齐：居中；
背景色：#fff；
填充：36px 24px 36px 24px；
边界半径：7px；
长方体阴影：0.1px rgba（0,0,0,15），
0 2px 3px 0 rgba（0,0,0,1）；
}
斯洛佩肯分区img
{
显示：块；
保证金：自动；
盒影：-2px-2px 5px 2px rgba（0,0,0,15），
2PX2PX4PX2PXRGBA（0,0,0,15）；
}
h1.大型
{
颜色：#fff；
字体大小：56px；
保证金：0；
线高：70px；
}
h1.2节收割台
{
字体大小：65px；
文本对齐：居中；
}
第左侧列
{
左缘：30%；
}
右侧立柱分区
{
左边距：15%；
}
输入[type=“password”]，/*由shamil添加*/
输入[type=“text”]
{
字体大小：20px；
宽度：400px；
最小宽度：100px；
填充物：5px；
边界半径：7px
}
表格h2
{
颜色：白色；
}
一行
{
宽度：100%；
显示器：flex；
柔性：包裹；
对齐项目：居中；
}
.行：：之后
{
显示：表格；
明确：两者皆有；
内容：“；
}
.col-1{宽度：8.33%；}
.col-2{宽度：16.66%；}
.col-3{宽度：25%；}
.col-4{宽度：33.33%；}
.col-5{宽度：41.66%；}
.col-6{宽度：50%；}
.col-7{宽度：58.33%；}
.col-8{宽度：66.66%；}
.col-9{宽度：75%；}
.col-10{宽度：83.33%；}
.col-11{宽度：91.66%；}
.col-12{宽度：100%；}
*{
框大小：边框框
}
足部
{
背景色：#666；
填充：2%
}
footer.footsy h1
{
颜色：#fff；
字体大小：35px；
}
footsyul
{
列表样式：无；
文本对齐：左对齐；
左侧填充：0；
}
footer.footsyulli
{
颜色：#fff；
字体大小：22px；
线高：1.5；
}
/********流动的*******/
@媒体屏幕和屏幕（最大宽度：680px）
{
ul.topnav li:不是（第n个孩子（1））
{
显示：无；
}
ul.topnav li.dropdownCon
{
显示：块；
浮动：对；
}
ul.topnav.responsive li.dropdownicon{
位置：绝对位置；
排名：0；
右：0；
}
ul.topnav.responsive{
位置：相对位置；
}
ul.topnav.li{
显示：内联；
浮动：无；
}
ul.topnav.lia
{
显示：块；
文本对齐：左对齐；
文本转换：大写；
}
h1.2节收割台
{
字体大小：55px；
}
.行{
弯曲方向：立柱；
}
第p条
{
字体大小：25px；
}
.col-4，
.col-5，
.col-6，
上校7
{
宽度：100%；
保证金：0；
}
机动车辆组
{
宽度：50%；
显示：块；
保证金：0；
}
分区箱
{
填充物：5px；
显示：块；
}
斯洛佩肯分区
{
利润率：10px；
}
斯洛佩肯分区img
{
宽度：100%；
}
右侧立柱分区，
第左侧列
{
宽度：15%；
}
输入[type=“password”]，
输入[type=“text”]
{
宽度：200px；
浮动：左；
填充物：5px；
}
.videoContainer iframe
{
宽度：400px；
浮动：左；
填充：5px；
}
}

动漫店









C
.footsy .row {
  flex-direction: row;
  flex-wrap: wrap;
}