Is it possible to make bootstrap column "snap" into place? - html

Question

I am playing around with Bootstrap and I ran into a small problem that I can't find a solution for. There probably is a solution out there, but I can't, for the life of me, figure out what to search for.
What I want to know is, if there is a way to make the columns snap to each other, so a big gap doesn't show up like shown in the fiddle, below the first div on the left hand side. I hope the fiddle describes the problem well enough for someone to point me in the right direction.
Fiddle: https://jsfiddle.net/DTcHh/24238/
body {
background: tomato;
}
.container {
background: white;
border: 1px solid grey;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-6 container">
<h3>Title</h3>
<p>Paragraph</p>
<div class="media-container">
<a href="http://placehold.it/200x200">
<img src="http://placehold.it/200x200" />
</a>
<a href="http://placehold.it/200x200">
<img src="http://placehold.it/200x200" />
</a>
<a href="http://placehold.it/200x200">
<img src="http://placehold.it/200x200" />
</a>
<a href="http://placehold.it/200x200">
<img src="http://placehold.it/200x200" />
</a>
<a href="http://placehold.it/200x200">
<img src="http://placehold.it/200x200" />
</a>
</div>
</div>
<div class="col-md-6 container">
<h3>Title</h3>
<p>Paragraph</p>
<div class="media-container">
<a href="http://placehold.it/200x200">
<img src="http://placehold.it/200x200" />
</a>
<a href="http://placehold.it/200x200">
<img src="http://placehold.it/200x200" />
</a>
<a href="http://placehold.it/200x200">
<img src="http://placehold.it/200x200" />
</a>
</div>
</div>
<div class="col-md-6 container">
<h3>Title</h3>
<p>Paragraph</p>
<div class="media-container">
<a href="http://placehold.it/200x200">
<img src="http://placehold.it/200x200" />
</a>
<a href="http://placehold.it/200x200">
<img src="http://placehold.it/200x200" />
</a>
<a href="http://placehold.it/200x200">
<img src="http://placehold.it/200x200" />
</a>
</div>
</div>
<div class="col-md-6 container">
<h3>Title</h3>
<p>Paragraph</p>
<div class="media-container">
<a href="http://placehold.it/200x200">
<img src="http://placehold.it/200x200" />
</a>
<a href="http://placehold.it/200x200">
<img src="http://placehold.it/200x200" />
</a>
<a href="http://placehold.it/200x200">
<img src="http://placehold.it/200x200" />
</a>
</div>
</div>
<div class="col-md-6 container">
<h3>Title</h3>
<p>Paragraph</p>
<div class="media-container">
<a href="http://placehold.it/200x200">
<img src="http://placehold.it/200x200" />
</a>
<a href="http://placehold.it/200x200">
<img src="http://placehold.it/200x200" />
</a>
<a href="http://placehold.it/200x200">
<img src="http://placehold.it/200x200" />
</a>
</div>
</div>
<div class="col-md-6 container">
<h3>Title</h3>
<p>Paragraph</p>
<div class="media-container">
<a href="http://placehold.it/200x200" />
<img src="http://placehold.it/200x200" />
</a>
<a href="http://placehold.it/200x200" />
<img src="http://placehold.it/200x200" />
</a>
<a href="http://placehold.it/200x200" />
<img src="http://placehold.it/200x200" />
</a>
</div>
</div>
</div>

Answer 1

Problem in your bootstrap grid structure. You use "container" class under "ROW" & "COL-MD-" so that's why you face the problem.
Working fiddle: https://jsfiddle.net/amitmonsterme/veyq6naL/
view this tutorial : http://getbootstrap.com/css/#overview-container

Answer 2

You can apply the float: right property to particular blocks when the screen width becomes 992px or more. I've defined a new special class .pull-md-right for this purpose.
Please check the result: https://jsfiddle.net/glebkema/9dqsj4pk/
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
body {
background: tomato;
}
.container {
background: white;
border: 1px solid grey;
}
#media (min-width: 992px) {
.pull-md-right {
float: right !important;
}
}
<div class="container">
<div class="row">
<div class="col-md-6">
<h3>Title 1</h3>
<p>Paragraph</p>
<div class="media-container">
<img src="http://placehold.it/200x200">
<img src="http://placehold.it/200x200">
<img src="http://placehold.it/200x200">
<img src="http://placehold.it/200x200">
<img src="http://placehold.it/200x200">
</div>
</div>
<div class="col-md-6">
<h3>Title 2</h3>
<p>Paragraph</p>
<div class="media-container">
<img src="http://placehold.it/200x200">
<img src="http://placehold.it/200x200">
<img src="http://placehold.it/200x200">
</div>
</div>
<div class="col-md-6 pull-md-right">
<h3>Title 3</h3>
<p>Paragraph</p>
<div class="media-container">
<img src="http://placehold.it/200x200">
<img src="http://placehold.it/200x200">
<img src="http://placehold.it/200x200">
</div>
</div>
<div class="col-md-6">
<h3>Title 4</h3>
<p>Paragraph</p>
<div class="media-container">
<img src="http://placehold.it/200x200">
<img src="http://placehold.it/200x200">
<img src="http://placehold.it/200x200">
</div>
</div>
<div class="col-md-6 pull-md-right">
<h3>Title 5</h3>
<p>Paragraph</p>
<div class="media-container">
<img src="http://placehold.it/200x200">
<img src="http://placehold.it/200x200">
<img src="http://placehold.it/200x200">
</div>
</div>
<div class="col-md-6">
<h3>Title 6</h3>
<p>Paragraph</p>
<div class="media-container">
<img src="http://placehold.it/200x200">
<img src="http://placehold.it/200x200">
<img src="http://placehold.it/200x200">
</div>
</div>
</div>
</div>