Javascript 引导表列在移动视图中可折叠

我正在尝试设计一个表，在mobile视图中，移动视图中不可见的最后两到三列应该只使用CSS，如果可能的话，使用Javascript而不是jQuery使其可折叠。这是为salesforce web应用程序执行的，因此不允许使用jQuery。任何帮助都会很好

尝试使用以下示例：

这有点类似，但我无法将最后两到三列数据分解并在下面显示

正文{
字体系列：arial；
}
桌子{
边框：1px实心#ccc；
宽度：100%；
保证金：0；
填充：0；
边界塌陷：塌陷；
边界间距：0；
}
表tr{
边框：1px实心#ddd；
填充物：5px；
}
表th，
表td{
填充：10px；
文本对齐：居中；
}
表th{
文本转换：大写；
字体大小：14px；
字母间距：1px；
}
@媒体屏幕和屏幕（最大宽度：600px）{
桌子{
边界：0；
}
餐桌{
显示：无；
}
表tr{
边缘底部：10px；
显示：块；
边框底部：2倍实心#ddd；
}
表td{
显示：块；
文本对齐：右对齐；
字体大小：13px；
边框底部：1px点#ccc；
}
表td：最后一个孩子{
边界底部：0；
}
表td：之前{
内容：attr（数据标签）；
浮动：左；
文本转换：大写；
字体大小：粗体；
}
}

付款
发行日期
数量
时期
付款#1
02/01/2015
$2,311
01/01/2015 - 01/31/2015
付款#2
03/01/2015
$3,211
02/01/2015 - 02/28/2015

那么在mobile中，您希望最后两列（金额和期间）是可折叠的？请再解释一下所需的行为。请稍等，我将上传图片