Linhas aninhadas com sistema de grade de autoinicialização?

Quero 1 imagem maior com 4 imagens menores em um formato 2x2 como este:

Meu pensamento inicial era abrigar tudo em uma linha. Em seguida, crie duas colunas e, na segunda coluna, crie duas linhas e duas colunas para criar o efeito 1x1 e 2x2.

No entanto, isso não parece ser possível, ou simplesmente não estou fazendo isso corretamente?

Bootstrap versão 3.x

Como sempre, leia a excelente documentação do Bootstrap:

Documentos do 3.x : https://getbootstrap.com/docs/3.3/css/#grid-nesting

Verifique se a linha no nível pai está dentro de um .containerelemento. Sempre que você desejar aninhar linhas, basta abrir uma nova parte .rowinterna da sua coluna.

Aqui está um layout simples para trabalhar:

<div class="container">
    <div class="row">
        <div class="col-xs-6">
            <div class="big-box">image</div>
        </div>
        <div class="col-xs-6">
            <div class="row">
                <div class="col-xs-6"><div class="mini-box">1</div></div>
                <div class="col-xs-6"><div class="mini-box">2</div></div>
                <div class="col-xs-6"><div class="mini-box">3</div></div>
                <div class="col-xs-6"><div class="mini-box">4</div></div>
            </div>
        </div>
    </div>
</div>

Bootstrap Versão 4.0

4.0 Documentos : http://getbootstrap.com/docs/4.0/layout/grid/#nesting

Aqui está uma versão atualizada para 4.0, mas você realmente deve ler a seção de documentos inteiros na grade para entender como aproveitar esse recurso poderoso

<div class="container">
  <div class="row">
    <div class="col big-box">
      image
    </div>

    <div class="col">
      <div class="row">
        <div class="col mini-box">1</div>
        <div class="col mini-box">2</div>
      </div>
      <div class="row">
        <div class="col mini-box">3</div>
        <div class="col mini-box">4</div>
      </div>
    </div>

  </div>
</div>

Demonstração no Fiddle jsFiddle 3.x |jsFiddle 4.0

Que ficará assim ( com um pouco de estilo adicional ):

Além do que o @KyleMit disse, considere usar:

• col-md-* classes para as colunas externas maiores
• col-xs-* classes para as colunas internas menores

Isso será útil quando você visualizar a página em diferentes tamanhos de tela.

Em uma tela pequena, o agrupamento de colunas externas maiores ocorrerá, mantendo as colunas internas menores, se possível