Q:

Responsive Grid of 4 images

I am trying to replicate eBay's 'Today' featured seller layout with 4 square images making up one box (see image), but with the use of Bootstrap. I'm really struggling to understand how I can achieve this. I can get the squares more or less even and looking okay on the lg, md and sm rules as of course things don't need to be resided down proportionately and I can just each square a fixed width and height. However, when it comes to mobile, this goes out the window as it needs to be resize depending on the window size of course.
 
The html that I've come up with at the moment is basically a grid split up into 9 and 3, (col-xs-9 and col-xs-3), with set heights given at each desktop/tablet width. 
The images will sometimes be squared images and other times they will be images in landscape or portrait format, and in this case they will keep their aspect ratio and spread to their max size but within the confines of the containing div.
Is there a way that I can achieve this using Bootstrap or will I need to look at alternatives using javascript for example?
Code below, just in case you need to take a look:
HTML
<div id="featured-merchant-container">
  <div class="featured-merchant-listings">
    <div class="row">
      <div class="primary-img-container col-xs-9 col-sm-9 col-md-9 col-lg-9 no-padding-right">
        <div class="big-hero-image">
          <a ng-if="merchant.userListings[0].primaryImage" ng-href="/#!/users/{{merchant._id}}">
            <span class="thumb">
              <img ng-src="{{merchant.userListings[0].primaryImage}}" />
            </span>
          </a>
          <a ng-if="!merchant.userListings[0].primaryImage" ng-href="/#!/users/{{merchant._id}}">
            <span class="thumb">
              <img ng-src="img/placeholder.png" />
            </span>
          </a>
        </div>
      </div>
      <div class="secondary-img-container col-xs-3 col-sm-3 col-md-3 col-lg-3 no-padding-left">
        <div class="big-hero-images">
          <div class="first">
            <a ng-if="merchant.userListings[1].primaryImage" ng-href="/#!/users/{{merchant._id}}">
              <span class="thumb">
                <img ng-src="{{merchant.userListings[1].primaryImage}}" />
              </span>
            </a>
            <a ng-if="!merchant.userListings[1].primaryImage" ng-href="/#!/users/{{merchant._id}}">
              <span class="thumb">
                <img ng-src="img/placeholder.png" />
              </span>
            </a>
          </div>
          <div class="second">
            <a ng-if="merchant.userListings[2].primaryImage" ng-href="/#!/users/{{merchant._id}}">
              <span class="thumb">
                <img ng-src="{{merchant.userListings[2].primaryImage}}" />
              </span>
            </a>
            <a ng-if="!merchant.userListings[2].primaryImage" ng-href="/#!/users/{{merchant._id}}">
              <span class="thumb">
                <img ng-src="img/placeholder.png" />
              </span>
            </a>
          </div>
          <div class="last">
            <a ng-if="merchant.userListings[3].primaryImage" ng-href="/#!/users/{{merchant._id}}">
              <span class="thumb">
                <img ng-src="{{merchant.userListings[3].primaryImage}}" />
              </span>
            </a>
            <a ng-if="!merchant.userListings[3].primaryImage" ng-href="/#!/users/{{merchant._id}}">
              <span class="thumb">
                <img ng-src="img/placeholder.png" />
              </span>
            </a>
          </div>
        </div>
      </div>
      </div>
  </div>
</div>

CSS:
#featured-merchant-container {
    border: 1px solid green-grey;

    .big-hero-image {
            text-align:center;
            .thumb {
                display:block;
                border-right:1px solid green-grey;
                height:413px;
                display:table-cell;
                vertical-align:middle;
                text-align:center;
                img {
                    width:100%;
                    height:413px;
                }
            }
    }

    .big-hero-images {
            text-align:center;
            // border-left:1px solid green-grey;
            .thumb {
                display:block;
                height:137px;
                display:table-cell;
                vertical-align:middle;
                text-align:center;
                img {
                    width:100%;
                    height:137px;
                }
            }
            .first, .second {
                    border-bottom:1px solid green-grey;
                }
    }
}

Please help me. This is driving me crazy :(. Thank you!

A:

Thanks for your answers everyone.
The way I managed to achieve this is by totally removing the use of Bootstrap altogether for the grid. I instead built the grid around percentages. I read something online which talked about how providing a percentage as the value for padding-top can basically give you a container which is of a certain aspect ratio. For example, if you wanted a div which maintained an aspect ratio by 4:3, what you would do is add 
padding-top:75%; 

in the style sheet for this div.
As long as the div has a given width, you can provide it's height using the padding-top percentage trick. As I wanted all div's in  the grid to be square, I added 
`padding-top:100%;`

to each of them. So for the big image in the grid, the css (stylus) was as follows:
.big-image {
        width: 75%;
        /* whatever width you want */
        display: inline-block;
        position: relative;
        float:left;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
        font-size:0px;

        &:after {
            padding-top: 100%;
            /* 16:9 ratio */
            display: block;
            content: '';
        }
}

Of course, as you can see below, the div needs to be relatively positioned, and the padding needs to be added within the :after css selector.
I hope this helps somebody. Thanks

