我没觉得哪里麻烦了，首先移动优先是特性，col-xs-* 是bootstrap默认样式，如果你只想固定比例，比如这样写一个两栏结构：
<div class="container">
<div class="col-xs-4">left</div>
<div class="col-xs-8">right</div>
</div>
那么你在任何设备上看到的都是4:8的两栏，只有当你想在其他宽度改变比例的时候才需要写其他的，比如我想在宽屏上变为8:4栏，我直接加上col-lg-*就可以了，
<div class="container">
<div class="col-xs-4 col-lg-8">left</div>
<div class="col-xs-8 col-lg-4">right</div>
</div>
如果你觉得这样也麻烦，那么你有一种针对同一个class属性可以改变比例的方法？
你难道要这样写：
@media (min-width: 768px) {
.col-4 {width:20%}
.col-8 {width:70%}
}
@media (min-width: 1200px) {
.col-4 {width:70%}
.col-8 {width:20%}
}
你不觉得非常的别扭么？
至于你说多加载了额外的样式，你可以看下源码，其实基本上都只是改变了下宽度，代码非常少。我觉得这点冗余要比多几个请求划算得多，不然为什么会有css sprites。