Zagnieżdżone wiersze z systemem siatki bootstrap?

Chcę 1 większy obraz z 4 mniejszymi obrazami w formacie 2x2, takim jak ten:

Moją pierwszą myślą było pomieszczenie wszystkiego w jednym rzędzie. Następnie utwórz dwie kolumny, a w drugiej kolumnie utwórz dwa rzędy i dwie kolumny, aby stworzyć efekt 1x1 i 2x2.

Nie wydaje się to jednak możliwe, czy po prostu nie robię tego poprawnie?

Bootstrap wersja 3.x

Jak zawsze przeczytaj wspaniałą dokumentację Bootstrap:

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

Upewnij się, że wiersz poziomu nadrzędnego znajduje się w .containerelemencie. Ilekroć chcesz zagnieżdżać wiersze, po prostu otwórz nowe .rowwnętrze kolumny.

Oto prosty układ do pracy:

<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 wersja 4.0

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

Oto zaktualizowana wersja 4.0, ale naprawdę powinieneś przeczytać całą sekcję dokumentacji w siatce, aby zrozumieć, jak wykorzystać tę zaawansowaną funkcję

<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>

Demo w Fiddle jsFiddle 3.x | jsFiddle 4.0

Który będzie wyglądał tak ( z odrobiną dodanego stylu ):

Dodając do tego, co powiedział @KyleMit, rozważ użycie:

• col-md-* klasy dla większych zewnętrznych kolumn
• col-xs-* klasy dla mniejszych wewnętrznych kolumn

Przyda się to podczas przeglądania strony o różnych rozmiarach ekranu.

Na małym ekranie nastąpi wówczas zawijanie większych zewnętrznych kolumn, przy jednoczesnym zachowaniu mniejszych wewnętrznych kolumn, jeśli to możliwe