行/列的Bootstrap更改顺序

Question

我有一个简单的网格，就像这样（这是我希望它在x-小型和小型显示器上看到的）：

BBBBBBBB
AAAAAAAA
AAAAAAAA  
AAAAAAAA
AAAAAAAA
...
CCCCCCCC
CCCCCCCC

这就是我想要的中型和大型显示器：

AAAAAAAA | BBBB
AAAAAAAA | CCCC
AAAAAAAA | CCCC  
AAAAAAAA |
...

这就是我到目前为止所做的：

http://jsfiddle.net/hpf597hq/9/

调整结果窗口大小，看看那里出了什么问题

看起来我似乎非常接近我想要完成的事情，但实际上我不知道如何解决红色和蓝色div之间的差距。

这甚至可能吗？

此致 马库斯

Answer 1

我删除了类col-md-push-8 and col-md-pull-4，并且仅使用媒体查询定位了更大设备的div。我已将第一个和最后一个div放到右边，这给出了预期的结果。

@media (min-width:992px) {
   .col-md-4 {
       float:right;
   }
}

Fiddle