bootstrap grid: position not symmetric - html

Question

So i'm building this portfolio type website and i just can't get the bootstrap grid to work properly. As you can see in the image, the second big row, which starts with the big image is not symmetric to the first row. I don't really understand where the problem is. I've managed to do that without bootstrap using fixed width and height, but that really is not an option as i would loose all the responsiveness. What am i doing wrong here?
<section class="container-fluid" style="max-width: 1980px; min-width:1280px;">
<div class="row">
<div class="col-md-7" style="padding-right: 0">
<div class="col-md-4" style="padding: 5px;">
<img src="http://placehold.it/350x200" class="img-responsive">
</div>
<div class="col-md-4" style="padding: 5px;">
<img src="http://placehold.it/350x200" class="img-responsive">
</div>
<div class="col-md-4" style="padding: 5px;">
<img src="http://placehold.it/350x200" class="img-responsive">
</div>
<div class="col-md-4" style="padding: 5px;">
<img src="http://placehold.it/350x200" class="img-responsive">
</div>
<div class="col-md-4" style="padding: 5px;">
<img src="http://placehold.it/350x200" class="img-responsive">
</div>
<div class="col-md-4" style="padding: 5px;">
<img src="http://placehold.it/350x200" class="img-responsive">
</div>
</div>
<div class="col-md-5" style="padding-left: 0">
<div class="col-md-12" style="padding: 5px;">
<img src="http://placehold.it/780x415" class="img-responsive">
</div>
</div>
</div>
<div class="row">
<div class="col-md-5" style="padding-right: 0">
<div class="col-md-12" style="padding: 5px;">
<img src="http://placehold.it/780x415" class="img-responsive">
</div>
</div>
<div class="col-md-7" style="padding-left: 0">
<div class="col-md-4" style="padding: 5px;">
<img src="http://placehold.it/350x200" class="img-responsive">
</div>
<div class="col-md-4" style="padding: 5px;">
<img src="http://placehold.it/350x200" class="img-responsive">
</div>
<div class="col-md-4" style="padding: 5px;">
<img src="http://placehold.it/350x200" class="img-responsive">
</div>
<div class="col-md-4" style="padding: 5px;">
<img src="http://placehold.it/350x200" class="img-responsive">
</div>
<div class="col-md-4" style="padding: 5px;">
<img src="http://placehold.it/350x200" class="img-responsive">
</div>
<div class="col-md-4" style="padding: 5px;">
<img src="http://placehold.it/350x200" class="img-responsive">
</div>
</div>
</div>
</section>
UPDATE:
So I actually managed to solve my problem, by creating two new column classes - col--small-blocks and col--large-blocks
.col-xs-small-blocks,
.col-sm-small-blocks,
.col-md-small-blocks,
.col-lg-small-blocks {
position: relative;
min-height: 1px;
padding: 0;
}
.col-xs-small-blocks {
width: 60%;
float: left;
}
#media (min-width: 768px) {
.col-sm-small-blocks {
width: 60%;
float: left;
}
}
#media (min-width: 992px) {
.col-md-small-blocks {
width: 60%;
float: left;
}
}
#media (min-width: 1200px) {
.col-lg-small-blocks {
width: 60%;
float: left;
}
}
.col-xs-large-blocks,
.col-sm-large-blocks,
.col-md-large-blocks,
.col-lg-large-blocks {
position: relative;
min-height: 1px;
padding: 0;
}
.col-xs-large-blocks {
width: 40%;
float: left;
}
#media (min-width: 768px) {
.col-sm-large-blocks {
width: 40%;
float: left;
}
}
#media (min-width: 992px) {
.col-md-large-blocks {
width: 40%;
float: left;
}
}
#media (min-width: 1200px) {
.col-lg-large-blocks {
width: 40%;
float: left;
}
}
This solved the problem, that bootstrap originally doesn't have classes for 5 column grid, so as you can see I created a column for my small images which takes up 60% of space and a column for my large blocks which takes up 40% of space. After that I just used col-md-4 to create the small blocks and col-md-12 for the large blocks
<section class="container-fluid" style="max-width: 1980px; min-width:1280px;">
<div class="row">
<div class="col-md-small-blocks">
<div class="col-md-4 block-padding">
<img src="http://placehold.it/375x200" class="img-responsive">
</div>
<div class="col-md-4 block-padding">
<img src="http://placehold.it/375x200" class="img-responsive">
</div>
<div class="col-md-4 block-padding">
<img src="http://placehold.it/375x200" class="img-responsive">
</div>
<div class="col-md-4 block-padding">
<img src="http://placehold.it/375x200" class="img-responsive">
</div>
<div class="col-md-4 block-padding">
<img src="http://placehold.it/375x200" class="img-responsive">
</div>
<div class="col-md-4 block-padding">
<img src="http://placehold.it/375x200" class="img-responsive">
</div>
</div>
<div class="col-md-large-blocks">
<div class="col-md-12 block-padding">
<img src="http://placehold.it/750x405" class="img-responsive">
</div>
</div>
</div>
<div class="row">
<div class="col-md-large-blocks">
<div class="col-md-12 block-padding">
<img src="http://placehold.it/750x405" class="img-responsive">
</div>
</div>
<div class="col-md-small-blocks">
<div class="col-md-4 block-padding">
<img src="http://placehold.it/375x200" class="img-responsive">
</div>
<div class="col-md-4 block-padding">
<img src="http://placehold.it/375x200" class="img-responsive">
</div>
<div class="col-md-4 block-padding">
<img src="http://placehold.it/375x200" class="img-responsive">
</div>
<div class="col-md-4 block-padding">
<img src="http://placehold.it/375x200" class="img-responsive">
</div>
<div class="col-md-4 block-padding">
<img src="http://placehold.it/375x200" class="img-responsive">
</div>
<div class="col-md-4 block-padding">
<img src="http://placehold.it/375x200" class="img-responsive">
</div>
</div>
</div>
</section>
And now as you can see, everything is symmetric and responsive :)