Solución:
Puede usar el diseño de la cuadrícula para darle algo como:
<div class="row">
<div class="col-xs-6">
<div>Big Image Goes Here</div>
</div>
<div class="col-xs-6">
<div class="col-xs-12">Little Image #1</div>
<div class="col-xs-12">Little Image #2</div>
<div class="col-xs-12">Little Image #3</div>
<div class="col-xs-12">Little Image #4</div>
</div>
</div>
Sin embargo, necesitaría agregar algo de relleno a las imágenes para darles el área blanca a su alrededor.
El diseño de la cuadrícula se explica aquí: diseño de cuadrícula de arranque
Aquí hay un ejemplo de JSFiddle.
Bootstrap se compone de 12 columnas seguidas. Si desea que algo muestre mitad y mitad, por ejemplo, el primer elemento tendría un valor de seis así: class="col-xs-6"y el segundo sería el mismo. Para aprender bootstrap realmente bien, haga de este sitio su mejor amigo.
Para una demostración de su solución, haga clic aquí
Aquí tenemos tu HTML
<div class="col-xs-7 left">
<img src="http://placehold.it/300x500">
</div>
<div class="col-xs-5 right">
<img src="http://placehold.it/200x100">
</div>
<div class="col-xs-5 right">
<img src="http://placehold.it/200x100">
</div>
<div class="col-xs-5 right">
<img src="http://placehold.it/200x100">
</div>
<div class="col-xs-5 right">
<img src="http://placehold.it/200x100">
</div>
CSS
.left{
float: left;
}
.right{
float: right;
}
div{
padding: 20px;
}
Probablemente ya haya una clase para objetos flotantes en bootstrap que simplemente no podía recordar exactamente, así que lo hice manualmente.