css - Bootstrap glitch in pull / push -

Starting with this question I have learned about Bootstrap column push and bridge.

The snippet below works in approx. I think getting the result:

Problem is resizing screen, two one way element (blue and green) in approx 1200px width one has another (You can check the snippet).

Any help?

  div, aside {height: 50px}. Content {background: lightpink;} Side1 {background: lightblue;} Side 2 {Background: LightGreen;}  

  & lt; Link rel = "stylesheet" href = "// maxcdn .bootstrapcdn.com / bootstrap / 3.3.4 / css / bootstrap.min.css" /> & Lt; Div class = "container" & gt; & Lt; Div square = "content left col-md-7 col-lg-push-2" & gt; & Lt; / Div & gt; & Lt; On one side, class = "side 1 left CO-MD-2 black-LG-bridge-7" & gt; & Lt; / One side & gt; & Lt; One side class = "side 2 left-to-MD-3" & gt; & Lt; / One side & gt; & Lt; / Div & gt;  

This is not a mess You should be set to a breakpoint similar to your push and drag column announcements that you are mixing the shape.

  div, aside {height: 50px}. Content {background: lightpink;} Side1 {background: lightblue;} .side2 {Background: LightGreen;}  

  & lt; Link rel = "stylesheet" href = "// maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" /> & Lt; Div class = "container" & gt; & Lt; Div class = "content left col-md-7 col-md-push-2" & gt; & Lt; / Div & gt; & Lt; Class = "side 1 left co-MD-2 colonel-MD-bridge-7" & gt; & Lt; / One side & gt; & Lt; One side class = "side 2 left-to-MD-3" & gt; & Lt; / One side & gt; & Lt; / Div & gt;