<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <h1>Nesting Columns</h1> <div style="padding:0 15px;"> <div class="row"> <div class="col-xs-8 col-sm-4"> <img class="img-thumbnail img1" alt="photo1"> </div> <div class="col-xs-4 col-sm-8"> <div class="row"> <div class="col-sm-6"> <img class="img-thumbnail img2" alt="photo2"> </div> <div class="col-sm-6"> <img class="img-thumbnail img3" alt="photo3"> </div> </div> </div> </div> </div> <p class="text-center cr">by <strong>RedRibbon</strong></p>

body {padding:20px;} h1{background:#F1645E; color:#fff!important; padding:10px 0; text-align:center; margin-bottom:20px!important;} p.cr{font-size:0.75em; color:#666; background:#eee; padding:5px; margin-top:20px;} p.cr > strong{color:#F1645E;} .debug > .row > div {box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444; } .debug > .row > div:nth-child(3n+1) {background-color: #5F8EFC;} .debug > .row > div:nth-child(3n+2) {background-color: #FEBA00;} .debug > .row > div:nth-child(3n) {background-color: #F1645E;} .img1{content:url(http://lorempixel.com/400/300/sports/3/)} .img2{content:url(http://lorempixel.com/400/300/sports/4/)} .img3{content:url(http://lorempixel.com/400/300/sports/5/)}