Html 引导响应表->；用列更改行

我在使用Bootstrap为学校创建时间表时遇到问题。 时间表应该对移动设备和平板电脑做出响应

大屏幕的视图工作得很好，但当切换到移动视图时，它会用列更改行

表格视图：

Mobileview：

主html文件：

@仅媒体屏幕和（最大宽度：800px）{
/*强制表不再像表一样*/
#没有桌子了，
#没有更多的桌子了thead，
#再也没有桌子了，
#再也没有桌子了，
#没有更多的桌子了，
#没有更多的桌子了{
显示：块；
}
/*隐藏表格标题（但不显示：none；，用于辅助功能）*/
#没有更多的桌子了{
位置：绝对位置；
顶部：-9999px；
左：-9999px；
}
#不再有表tr{border:1px solid#ccc；}
#没有更多的桌子了{
/*表现得像“一排”*/
边界：无；
边框底部：1px实心#eee；
位置：相对位置；
左：50%；
空白：正常；
文本对齐：左对齐；
}
#没有更多的桌子了td:以前{
/*现在就像一个表格标题*/
位置：绝对位置；
/*上/左值模拟填充*/
顶部：6px；
左：6px；
宽度：45%；
右边填充：10px；
空白：nowrap；
文本对齐：左对齐；
字体大小：粗体；
}
/*
标记数据
*/
#在{content:attr（数据标题）；}之前不再有表td:
}

时刻表
时刻表
星期一
星期二
星期三
星期四
星期五
07:45 |1| 08:35
课程
课程
课程
课程
课程
08:35 |2| 09:25
课程
课程
课程
课程
课程
09:30 |3| 10:20
课程
课程
课程
课程
课程
10:35 |4| 11:25
课程
课程
课程
课程
课程
11:30 |5| 12:20
课程
课程
课程
课程
课程
12:20 |6| 13:10
课程
课程
课程
课程
课程
13:10 |7| 14:00
课程
课程
课程
课程
课程
14:00 |8| 14:50
课程
课程
课程
课程
课程
15:00 |9| 15:50
课程
课程
课程
课程
课程
15:55 |10| 16:45	
课程
课程
课程
课程
课程
16:50 |11| 17:40	
课程
课程
课程
课程
课程
17:40 |12| 18:30	
课程
课程
课程
课程
课程
18:55 |13| 19:40	
课程
课程
课程
课程
课程
19:40 |14| 20:25	
课程
课程
课程
课程
课程
20:30 |15| 21:15	
课程
课程
课程
课程
课程
21:15 |16| 22:00	
课程
课程
课程
课程
课程

替换html代码行

与

及

与

见工作