Bootstrap изменение порядка строк/столбцов

Question

У меня есть простой сетки, как и (это то, что я хочу, чтобы она выглядела на х-малых и малых дисплеев):

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 вправо, который дал предполагаемый результат.

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

Fiddle