Html 将水平数据列表转换为垂直媒体查询，CSS

请使用媒体查询帮助将以下标记转换为跨多个屏幕的响应标记，也请随时根据需要更新标记样式：

以下代码的突出问题是：

代码没有响应

样式在的“日期和时间”部分中特别与分隔 加成具体地说，这些css类在屏幕上出现 .停机时间样式和日期容器和日期范围和日期月份 .date-time和.date-day类在CSS中指定如下

。停机时间样式{
文本对齐：居中；
填充底部：30px；
颜色：#007599；
字体系列：Univers LT W01_55 Roman1475956，Arial，衬线；
}
.日期容器{
显示：内联块；
文本对齐：居中；
颜色：#007599；
字体系列：Univers LT W01_55 Roman1475956，Arial，衬线；
}
.日期范围{
身高：100%；
显示器：flex；
左侧填充：15px；
-webkit盒包：中心；
对正内容：左；
-webkit框对齐：居中；
对齐项目：居中；
}
.日期月份{
宽度：100%；
字体大小：14px；
文本转换：大写；
填充顶部：30px；
保证金：0；
}
.日期时间{
宽度：100%；
字体大小：14px；
文本转换：大写；
填充顶部：0px；
保证金：0；
}
.日期{
字体大小：24px；
垫底：0px；
页边距底部：0；
}
.分区{
填充顶部：20px；
左侧填充：40px；
字体大小：100%；
字体：继承；
}
.主分区{
位置：相对位置；
边缘顶部：10px；
显示器：flex；
右边距：0px；
左边距：0px；
高度：125px；
边框：1px实心#A9A9；
边界半径：12px；
溢出：隐藏；
背景色：#F8；
}
.主要部门摘要{
位置：相对位置；
边缘顶部：10px；
右边距：0px；
左边距：0px；
高度：125px；
边框：1px实心#A9A9；
边界半径：12px；
背景色：#F8；
}
.主接线盒{
背景色：#2cbc85；
位置：绝对位置；
排名：0；
左：0；
底部：0；
宽度：30px；
}
p盒{
变换原点：0.50%；
位置：绝对位置；
字体大小：粗体；
排名：0；
底部：0；
高度：30px；
线高：30px；
保证金：自动；
变换：旋转（-90度）平移（-50%，50%）；
颜色：黑色；
文本转换：大写；
字体大小：16px；
字体系列：Univers LT W01_65 Bold1475968，Arial，衬线；
}
.职称类别{
字体大小：20px；
}
.管道项目组{
身高：100%；
填充顶部：15px；
左侧填充：70px；
垫底：15px；
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
颜色：#000f2b；
字体系列：Univers LT W01_45 Light1475944，Arial，衬线；
}
.light字体{
字体大小：正常；
边际：0px；
字号：100；
字体系列：Arial；
}

`在此处输入代码`
完成
事件名称

XYZLMNOP
名称：ABC

类型：XYZ
通知用户：4
受影响的计数：
三,
受影响列表：
一,
六月

2
上午10点
六月

3
下午12点

停机时间：
2小时

创建一个工作的jsfiddleStefanBob请找到上面的代码片段，请给出建议！