Bootstrap 3.3.7 column layout problems on md - html

Question

This is the current layout for my bootstrap website. Unfortunately it isn't working as the columns are completely off on md sizes.
Here is the current view.
My goal is to have them grouped by 2 columns on md sizes. So the layout would be image+text;new column;image+text;new column;image+text
<div class="row">
<div class="col-lg-4 col-md-6 coko">
<img src="images/malinica.jpg" class="img-responsive img-rounded" alt="Cokol">
<a class="link" href="#"><div class="preko">
<h3 class="text-center">Cakes</h3></div></a>
</div>
<div class="col-lg-4 col-md-6 coko">
<p class="text-center">In 1995, The Rolling Pin
opened its first location on a quiet street corner in the heart of
Munich. From its inception, The Rolling Pin has been cherished for its
classic Germany baked goods, vintage decor and warm, invitig atmosphere.
</p>
</div>
<div class="col-lg-4 coko col-md-6">
<img src="images/cupcake.jpg" class="img-responsive img-rounded" alt="Coko">
<a class="link" href="#"><div class="preko">
<h3 class="text-center">Muffins</h3>
</div></a>
</div>
</div>
<div class="row">
<div class="col-lg-4 coko col-md-6">
<h3 class="text-center">We stand for organic</h3>
<p class="text-center">The Rolling Pin has a whole line of organic
desserts and drinks that prove that eating organic can taste just as
delicious.</p>
</div>
<div class="col-lg-4 col-md-6 coko">
<img src="images/kafa.jpg" class="img-responsive img-rounded" alt="Coko">
<a class="link" href="#"><div class="preko">
<h3 class="text-center">Drinks</h3>
</div></a>
</div>
<div class="col-lg-4 col-md-6 coko">
<h3 class="text-center">Pet friendly</h3>
<p>If you have a dog or cat, this is the right place for
you. Except our place, we offer you a special menu for your pet.</p>
</div>
</div>

Answer 1

See if this helps:
https://codepen.io/panchroma/pen/geYeep
There are 2 challenges with a layout like this.
Firstly you want to have all your elements in the same row, and secondly, you need to allow for columns being different heights. nth child selectors and some #media selectors are an efficient way manipulate the CSS and make it work.
HTML - this is exactly the same as yours except for a couple of lines commented out so all the elements are in the same row
<div class="row">
<div class="col-lg-4 col-md-6 coko">
<img src="http://www.fillmurray.com/500/400" class="img-responsive img-rounded" alt="Cokol">
<a class="link" href="#">
<div class="preko">
<h3 class="text-center">Cakes</h3>
</div>
</a>
</div>
<div class="col-lg-4 col-md-6 coko">
<p class="text-center">In 1995, The Rolling Pin opened its first location on a quiet street corner in the heart of Munich. From its inception, The Rolling Pin has been cherished for its classic Germany baked goods, vintage decor and warm, invitig
atmosphere.
</p>
</div>
<div class="col-lg-4 coko col-md-6">
<img src="http://www.fillmurray.com/500/200" class="img-responsive img-rounded" alt="Coko">
<a class="link" href="#">
<div class="preko">
<h3 class="text-center">Muffins</h3>
</div>
</a>
</div>
<!-- </div> -->
<!-- <div class="row"> -->
<div class="col-lg-4 coko col-md-6">
<h3 class="text-center">We stand for organic</h3>
<p class="text-center">The Rolling Pin has a whole line of organic desserts and drinks that prove that eating organic can taste just as delicious.
</p>
</div>
<div class="col-lg-4 col-md-6 coko">
<img src="http://www.fillmurray.com/500/300" class="img-responsive img-rounded" alt="Coko">
<a class="link" href="#">
<div class="preko">
<h3 class="text-center">Drinks</h3>
</div>
</a>
</div>
<div class="col-lg-4 col-md-6 coko">
<h3 class="text-center">Pet friendly</h3>
<p>If you have a dog or cat, this is the right place for you. Except our place, we offer you a special menu for your pet.</p>
</div>
</div>
CSS - the first media query ensures that every third column floats left to the start of a new row at an md viewport.
The other is to compensate for the removal of the second row div in your HTML
#media (max-width: 1199px) {
.row div:nth-child(odd){
clear:left
}
}
#media (min-width: 1200px) {
.row div:nth-child(3n + 4){
clear:left
}
}
Good luck!

Answer 2

It's because min-height problem. Add extra div and min-height.
or
Add min-height for your .coko div.