Bootstrap grid div being pushed out at certain sizes - html

Question

I wanted to create a layout with one image on the left taking up 6 columns and 2 'rows' and 4 squares on the right taking up the other half, i.e/ each one taking up 3 columns, 2 on top and 2 below.
This all works fine, except that 1 image gets pushed down. When the screen is made smaller, it pops back up, and then drops back down again at other smaller sizes.
Here it is on bootply
and here is my code:
<div class="container">
<div class="container-fluid">
<div class="row-fluid">
<div class="box1 col-md-6">
<img src="http://www2.buit.ie/wp-content/uploads/2015/06/Sheep-002-Wm.jpg">
</div>
<div class="box1 col-md-3 col-sm-6">
<img src="http://www2.buit.ie/wp-content/uploads/2015/06/roseveal.jpg">
</div>
<div class="box1 col-md-3 col-sm-6">
<img src="http://www2.buit.ie/wp-content/uploads/2015/06/roseveal5.jpg">
</div>
<div class="box1 col-md-3 col-sm-6">
<img src="http://www2.buit.ie/wp-content/uploads/2015/06/Sheep-002-Wm.jpg">
</div>
<div class="box1 col-md-3 col-sm-6">
<img src="http://www2.buit.ie/wp-content/uploads/2015/06/tentego_wagen.jpg">
</div>
</div>
</div>
</div>
My CSS is:
.box1 img {
width:100%;
}
.container {
width:100%;
padding:0px;
max-width: 1265px;
overflow: auto;
}
.row {
margin-left: 0px;
margin-right: 0px;
}
.col-md-3, .col-md-6, .col-sm-6 {
padding-left: 0px;
padding-right: 0px;
}
Please excuse the images - I'm meant to be designing a sort of farming website!
Any help or insight would be so much appreciated.

Answer 1

I have determined that it has to do with your images not being consistent.
Basically, your images are all different sizes, and you make no effort to enforce a standard upon them. You do put them in bootstrap columns, which is keeping them the proper widths, but the heights are still messing up and differing just slightly, which sometimes kicks your last image down to the next row.
I changed this css by adding a height:auto, which helped.
.box1 img{
width:100%;
height: auto;
}
I then tried making all four images on the right the same image, and the problem went away completely. I forked your bootply over here if you want to see the whole thing.
I have to say, It's looking pretty neat, you should be proud of yourself. It flows really well other than this hiccup. You might consider setting the max-height, or setting height to auto if you make sure that your pictures are all identical aspect ratios. They are already close to the same aspect ratio, but it's giving you these subtle difference that were difficult to detect visually, but are screwing up your layout.

Answer 2

Rufus, Try doing it like this.
Here is the full size Fiddle.
Using 3 sets of rows looks to help what you are looking to to here.
The extra classes also help keep the layout that you are looking for too.
<div class="container-fluid col-lg-12">
<div class="row-fluid col-sm-6 col-md-6 col-lg-6">
<div class="box1 col-sm-12 col-md-12 col-lg-12">
<img src="http://www2.buit.ie/wp-content/uploads/2015/06/Sheep-002-Wm.jpg">
</div>
</div>
<div class="row-fluid col-sm-6 col-md-6 col-lg-6">
<div class="box2 col-xs-6 col-sm-6 col-md-6 col-lg-6">
<img src="http://www2.buit.ie/wp-content/uploads/2015/06/roseveal.jpg">
</div>
<div class="box2 col-xs-6 col-sm-6 col-md-6 col-lg-6">
<img src="http://www2.buit.ie/wp-content/uploads/2015/06/roseveal5.jpg">
</div>
</div>
<div class="row-fluid col-sm-6 col-md-6 col-lg-6">
<div class="box2 col-xs-6 col-sm-6 col-md-6 col-lg-6">
<img src="http://www2.buit.ie/wp-content/uploads/2015/06/Sheep-002-Wm.jpg">
</div>
<div class="box2 col-xs-6 col-sm-6 col-md-6 col-lg-6">
<img src="http://www2.buit.ie/wp-content/uploads/2015/06/tentego_wagen.jpg">
</div>
</div>
</div>