Совместите один большой DIV с двумя меньшими

Question

Я пытаюсь сделать что-то вроде этого:

Это мой код:

!-- BIG ONE LEFT -->
    <div class="container">
    <div class="row">
      <div class="col-lg-8">
        <div class="row">
          <div class="col-lg-12">
            <div class="card">
              <a href="#"><img style="height: 420px;" class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
            </div>
          </div>
        </div>
      </div>

      <!-- Smalls -->
      <div class="col-lg-4">
        <div class="row">
          <div class="col-lg-12 col-md-6">
            <div class="card">
              <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
            </div>
          </div>
          <div class="col-lg-12 col-md-6">
            <div class="card">
              <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>

и вот результат:

https://codepen.io/anon/pen/WJRGYe

Answer 1

Просто используйте отзывчивые утилиты для отступов.

<!-- BIG ONE LEFT -->
<div class="row">
    <div class="col-lg-8">
        <div class="card">
            <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
        </div>
    </div>

    <!-- Smalls -->
    <div class="col-lg-4">
        <div class="row">
            <div class="col-lg-12 col-md-6">
                <div class="card">
                    <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
                </div>
            </div>
            <div class="col-lg-12 col-md-6 pt-lg-3 pt-0">
                <div class="card">
                    <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
                </div>
            </div>
        </div>
    </div>
</div>

https://www.codeply.com/go/wJvmJUlIu0

Answer 2

Вы можете попробовать этот подход, используя flexbox

HTML

<div class="container">
  <div class="row">
    <div class="flex-container">
      <div class="flex-left">
      </div>
      <div class="flex-right">
        <div class="flex-right-top">
        </div>
        <div class="flex-right-bottom">
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.flex-container {
  display: flex;
}

.flex-left {
  flex-basis: 66%;
}

.flex-right {
  flex-basis: 34%;
  display: flex; // for its child elements
  flex-direction: column;
}

.flex-right-top, .flex-right-bottom {
  flex: 1;
}