Make 4 responsive box in bootstrap - css

Question

Hi I am trying to make this but my forth box goes to the bottom Here is my code.
Please help me to figure it out. Thanks everyone in advance.
<div class="offer">
<h2>Current Offers</h2>
<div class="container text-center">
<div class="row">
<div class="col-sm-3 col-md-4">
<div class="thumbnail checkout-thumbnail">
<img src="images/img1.jpg" alt="Image 1">
<div class="caption checkout-caption">
<h3>House and Land Packages</h3>
<p>Check out Button
</p>
</div>
</div>
</div>
<div class="col-sm-3 col-md-4">
<div class="thumbnail checkout-thumbnail">
<img src="images/img1.jpg" alt="...">
<div class="caption checkout-caption">
<h3>House and Land Packages</h3>
<p>Check out Button
</p>
</div>
</div>
</div>
<div class="col-sm-3 col-md-4">
<div class="thumbnail checkout-thumbnail">
<img src="images/img1.jpg" alt="...">
<div class="caption checkout-caption">
<h3>House and Land Packages</h3>
<p>Check out Button
</p>
</div>
</div>
</div>
<div class="col-sm-3 col-md-4">
<div class="thumbnail checkout-thumbnail">
<img src="images/img1.jpg" alt="...">
<div class="caption checkout-caption">
<h3>House and Land Packages</h3>
<p>Check out Button
</p>
</div>
</div>
</div>
</div>
</div>
and CSS
.thumbnail.checkout-thumbnail {
background: #eee;
border:none;
max-width: 220px;
}
.caption.checkout-caption {
margin-top: 2px;
}
.btn.btn-checkout {
border-radius: 0;
border: none;
background: none;
margin-top: 30px;
}
.btn.btn-orange {
border: 2px solid orange;
}
.btn.btn-teal {
border: 2px solid teal;
}
.btn.btn-red {
border: 2px solid red;
}
Please see the image here so that you can understand, I am trying to make it like this image

Answer 1

Your Code is working fine. Are you testing your code in small size screen (max 768px) or medium screen (min 769 and max 992). I have tested your code is in small screen and it is working fine. As you have divided 12 column into four col-sm-3.
But when it comes to medium screen you have divided your 12 column into only three col-md-4. According to your coding the fourth column definitely will go down in medium size screen. So If you want to maintain four columns in medium screen then you have to change your col-md-4 to col-md-3.

Answer 2

as i can see in you html code you have used col-md-4 instead of col-md-3,
i hope this resolves your query.
As you know bootstrap grid is of 12 columns so you have to use col-md-3 to get 4 columns in a row.

Answer 3

You should use
col-md-3
instead of
col-md-4
to show all four box in one row for Desktops having width ≥992px