Javascript Bootstrap 3移动版赢得'；行不通

我这里有一些代码，当压缩到移动版本时，它被不正确地呈现：

html在这里（带有侧栏） 有人知道如何在移动版本中正确渲染长方体吗

亲切问候,

.pdsa摘要块主{
背景色：#428bca；
颜色：#fff；
}
.pdsa摘要块主摘要页脚{
背景颜色：深蓝；
}
.pdsa摘要块主摘要页脚a{
颜色：白色；
}
.pdsa摘要块成功{
背景色：#3c763d；
颜色：#fff；
}
.pdsa摘要块成功。摘要页脚{
背景颜色：绿色；
}
.pdsa摘要块成功。摘要页脚a{
颜色：白色；
}
.pdsa摘要块信息{
背景色：#31708f；
颜色：#fff；
}
.pdsa摘要块信息摘要页脚{
背景色：青色；
}
.pdsa摘要块信息。摘要页脚a{
颜色：白色；
}
.pdsa汇总块危险{
背景色：#a94442；
颜色：#fff；
}
.pdsa摘要块危险。摘要页脚{
背景色：红色；
}
.pdsa摘要块危险。摘要页脚a{
颜色：白色；
}
/*摘要块的结构*/
.pdsa摘要块{
位置：相对位置；
宽度：100%；
保证金：0.3em；
填充：1em；
最小高度：15em；
}
.pdsa摘要块.summary background i、.pdsa摘要块.summary background div{
左边距：-0.4em；
边缘顶部：0.1米；
字号：8em；
不透明度：0.3；
}
.pdsa摘要块.摘要正文{
位置：绝对位置；
顶部：1.3em；
右：0.8em；
}
.pdsa摘要块摘要正文摘要行-1{
文本对齐：右对齐；
字体大小：xx大号；
}
.pdsa摘要块摘要正文摘要行-2{
文本对齐：右对齐；
字号：中等；
}
.pdsa摘要块。摘要页脚{
位置：绝对位置；
底部：0em；
右：0em；
宽度：100%；
填充：0.4em；
字体大小：300；
文本转换：大写；
字体大小：小；
不透明度：0.6；
}
.pdsa摘要块。摘要页脚a{
文字装饰：无；
}
.pdsa摘要块。摘要页脚：悬停{
不透明度：1；
光标：指针；
}
.pdsa序列号包装器{
位置：绝对位置；
顶部：3.6em；
左：0em；
宽度：13em；
身高：100%；
背景色：#FF9900；
/*橙色*/
过渡：左0.3s线性；
-moz过渡：左0.3s线性；
-webkit转换：左0.3s线性；
}
.pdsa-sn-ul{
列表样式：无；
宽度：11em；
边缘顶部：2米；
左边距：1米；
填充：0em；
}
.pdsa sn-ul-li{
边缘顶部：1米；
边缘底部：0.5em；
}
/*使悬停背景。pdsa序列号包装器ul li:悬停{
背景色：#760909；
} */
.pdsa sn包装器ul li a{
颜色：白色；
文字装饰：无；
填充：0.5em；
}
.pdsa序列号包装器ul li a：悬停{
文字装饰：无；
颜色：白色；
}
.pdsa sn wrapper ul li a:活动，.pdsa sn wrapper ul li a:焦点{
文字装饰：无；
大纲：无；
颜色：白色；
}
.pdsa sn包装ul.pdsa sn品牌{
左边距：-0.5em；
字体大小：大号；
颜色：白色；
}
.pdsa sn包装ul.pdsa sn品牌a{
颜色：白色；
}
.pdsa sn包装ul.pdsa sn品牌a：悬停{
颜色：白色；
背景：无；
}
.pdsa序列号包装器ul li a跨度{
边缘顶部：-1米；
边缘底部：-1米；
左边距：1米；
边缘顶部：-1米；
衬垫顶部：-1米；
垫底：-1米；
}
.pdsa sn-ul-li-ul{
列表样式：无；
边缘顶部：1米；
左边距：1米；
}
/*仅在手机上使左导航变成图标*/
@介质和全部（最大宽度：768px）{
.pdsa序列号包装器{
左：-10em；
/*上面改为+13em。现在它将占据屏幕的一部分*/
}
.pdsa序列号包装器ul li：悬停{
背景色：#FF9900；
}
.pdsa sn包装器ul li a i{
左：10em；
边缘顶部：-1米；
边缘底部：-1米；
}
.正文内容{
左边距：3em；
}
}