css - 如何在 Bootstrap 3 中制作此布局？

Question

我对在 Bootstrap 3 的网格中创建这个布局有点困惑:

http://oi62.tinypic.com/142sjt0.jpg (由于代表无法在此处发布图片)

这是我起床的地方:http://www.bootply.com/7VrPUQwFAV

<div class="container">                          

<div class="row">

                            <div class="col-sm-3">
                            <a href="#"><img class="img-responsive" src="http://placehold.it/263x263" alt=""></a>
                            <a href="#"><img class="img-responsive padding-top-30" src="http://placehold.it/263x556" alt=""></a>
                            </div>


                            <div class="col-sm-6">
                            <a href="#"><img class="img-responsive" src="http://placehold.it/555x555" alt=""></a>

                            <div class="row">


                            <div class="col-sm-12 col-sm-offset-6">
                            <a href="#"><img class="img-responsive padding-top-30" src="http://placehold.it/555x263" alt=""></a>
                            </div>

                            </div>

                            </div>


                            <div class="col-sm-3">
                            <a href="#"><img class="img-responsive" src="http://placehold.it/526x526" alt=""></a>
                            <a href="#"><img class="img-responsive padding-top-30" src="http://placehold.it/526x526" alt=""></a>
                            </div>

                            </div> 

</div>

有人可以帮忙吗？

Answer 1

<div class="container">
        <div class="row">
            <div class="col-sm-3">
                <a href="#"><img class="img-responsive" src="http://placehold.it/263x263" alt=""></a>
                 <a href="#"><img class="img-responsive padding-top-30" src="http://placehold.it/263x556" alt=""></a>
            </div>
            <div class="col-sm-9">
                <div class="row">
                    <div class="col-sm-8">
                        <a href="#"><img class="img-responsive" src="http://placehold.it/555x555" alt=""></a>
                    </div>
                    <div class="col-sm-4">
                         <a href="#"><img class="img-responsive" src="http://placehold.it/263x263" alt=""></a>
                         <a href="#"><img class="img-responsive" src="http://placehold.it/263x263" alt=""></a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4">
                         <a href="#"><img class="img-responsive" src="http://placehold.it/263x263" alt=""></a>
                    </div>
                    <div class="col-sm-8">
                        <a href="#"><img class="img-responsive" src="http://placehold.it/555x263" alt=""></a>
                    </div>
                </div>
            </div>
        </div>
    </div>