Bootstrap сбой в pull/push

Question

, начиная с этого вопроса Three column Bootstrap layout with left sidebar at bottom Я узнал о том, как колонка Pushstrap выталкивает и тянет.

Сниппет ниже работает почти в получении результата я хочу:

Проблема изменения размера экрана, около 1200px шириной два aside элементы (синие и зеленые) являются рядом друг другой (вы можете проверить фрагмент).

Любая помощь?

div,aside { height: 50px} 
 
.content { background: lightpink;} 
 
.side1 { background: lightblue;} 
 
.side2 { background: lightgreen;}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" /> 
 

 
<div class="container"> 
 
    <div class="content left col-md-7 col-lg-push-2"></div> 
 
    <aside class="side1 left col-md-2 col-lg-pull-7"></aside> 
 
    <aside class="side2 left col-md-3"></aside> 
 
</div>

Answer 1

Это не глюк. Вы смешиваете размеры. Ваши толкания и тяги должны быть установлены в той же точке останова, что и объявления столбцов.

div,aside { height: 50px} 
 
.content { background: lightpink;} 
 
.side1 { background: lightblue;} 
 
.side2 { background: lightgreen;}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" /> 
 

 
<div class="container"> 
 
    <div class="content left col-md-7 col-md-push-2"></div> 
 
    <aside class="side1 left col-md-2 col-md-pull-7"></aside> 
 
    <aside class="side2 left col-md-3"></aside> 
 
</div>