Getting wrong Image gallery in Bootstrap

Question

I am new to Bootstrap and want to make a Image gallery. How I expect is

But I am getting it like this:

My HTML code is this:

<div class="row">
                    <div class="col-md-4">
                        <a href="#" class="thumbnail">
                            <img src="img/sell/5.jpg" class="img-responsive" alt="...">
                        </a>
                    </div>
                    <div class="col-md-8">
                        <div class="col-md-12">
                            <a href="#" class="thumbnail">
                                <img src="img/slider/slider-1.jpg" class="img-responsive" alt="...">
                            </a>
                        </div>
                        <div class="col-md-6">
                            <a href="#" class="thumbnail">
                                <img src="img/sell/5.jpg" class="img-responsive" alt="...">
                            </a>
                        </div>
                        <div class="col-md-6">
                            <a href="#" class="thumbnail">
                                <img src="img/sell/5.jpg" class="img-responsive" alt="...">
                            </a>
                        </div>
</div>

Please tell how to write the correct code.

Answer 1

You have the correct code. The difference is, your left image is just not equal is height to the right images.

In the expectation example, the left image is equal to the height of the 2 rows of images on the right. Using a longer image on the right will fix it (or giving the left column more wider column space).