html - Twitter Bootstrap - unusual arrangement of the columns -

I have a problem and I can not find a good solution right now what I want to achieve (at the screen size> = Medium):

Black boxes will contain images . White color shows user screen view. I would like to have those horizontal boxes fit perfectly on the screen edges.

  and lt; Link href = "http: // Cdn.jsdelivr.net/bootstrap/3.3.2/css/bootstrap.min.css" rel = "stylesheet" /> & Lt; Div class = "container" & gt; & Lt; Div class = "row" & gt; & Lt; Div class = "col-xs-12 col-sm-6 col-md-4" & gt; & Lt; Img class = "img-responsive" src = "http://placehold.it/1920x300&text=1" alt = "" /> & Lt; / Div & gt; & Lt; Div class = "col-xs-12 col-sm-6 col-md-4" & gt; & Lt; Img class = "img-responsive" src = "http://placehold.it/1920x300&text=2" alt = "" /> & Lt; / Div & gt; & Lt; Div class = "visually visible-SM-block" & gt; & Lt; / Div & gt; & Lt; Div class = "col-xs-12 col-sm-6 col-md-4" & gt; & Lt ;! - At the resolution of the right edge of the screen, click & gt; = Moderate - & gt; & Lt; Img class = "img-responsive" src = "http://placehold.it/1920x300&text=3" alt = "" /> & Lt; / Div & gt; & Lt; Div class = "col-xs-12 col-sm-6 col-md-4" & gt; & Lt ;! - On resolution it & gt; = Moderate - & gt; Keep on the left edge of the screen & lt; Img class = "img-responsive" src = "http://placehold.it/1920x300&text=4" alt = "" / & gt; & Lt; / Div & gt; & Lt; Div class = "visually visible-SM-block" & gt; & Lt; / Div & gt; & Lt; Div class = "col-xs-12 col-sm-6 col-md-4" & gt; & Lt; Img class = "img-responsive" src = "http://placehold.it/1920x300&text=5" alt = "" /> & Lt; / Div & gt; & Lt; Div class = "hidden-x-to-sm-6-md-4" & gt; & Lt; Img class = "img-responsive" src = "http://placehold.it/1920x300&text=6" alt = "" /> & Lt; / Div & gt; & Lt; Div class = "visually visible-SM-block" & gt; & Lt; / Div & gt; & Lt; Div class = "col-xs-12 col-sm-6 col-md-4" & gt; & Lt; Img class = "img-responsive" src = "http://placehold.it/1920x300&text=7" alt = "" / & gt; & Lt; / Div & gt; & Lt; Div class = "hidden-x hidden -sm column -md-4" & gt; & Lt; Img class = "img-responsive" src = "http://placehold.it/1920x300&text=8" alt = "" /> & Lt; / Div & gt; & Lt; Div class = "col-xs-12 col-sm-6 col-md-4" & gt; & Lt; Img class = "img-responsive" src = "http://placehold.it/1920x300&text=9" alt = "" /> & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "container" & gt; & Lt; Div class = "row" & gt; & Lt; Div class = "col-xs-12" & gt; There is some other content in the container class, the total width of those three images above should be equal to this container so that it fits well & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; I give the original grid with the elements I want to see based on user screen size.  
 Any help with this will be great.  
 BTW: It should be in the  container  because these images will have content above and below and it must be aligned to any kind of alignment. 
 

I think this should work for you

  Lt; Div class = "container" & gt; & Lt; Div class = "row" & gt; & Lt; Div class = "col-sm-2 col-sm-offset-3" & gt; & Lt; / Div & gt; & Lt; Div class = "col-sm-2" & gt; & Lt; / Div & gt; & Lt; Div class = "col-sm-4" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "row" & gt; & Lt; Div class = "col-sm-4 col-sm-offset-1" & gt; & Lt; / Div & gt; & Lt; Div class = "col-sm-2" & gt; & Lt; / Div & gt; & Lt; Div class = "col-sm-2" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "row" & gt; & Lt; Div class = "col-sm-2 col-sm-offset-3" & gt; & Lt; / Div & gt; & Lt; Div class = "col-sm-2" & gt; & Lt; / Div & gt; & Lt; Div class = "col-sm-2" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;