Колонны Bootstrap

Question

Итак, я работаю над галереей изображений с Bootstrap ... Проблема в том, что я не могу сделать четыре изображения: два сверху, три под верхним и в левом углу вертикальное изображение. Вы можете видеть на изображении, что у меня есть четыре изображения, но под ними вертикальное ...

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <img class="img-responsive col-md-4" src="img/gallery/potok.jpg">
            <img class="img-responsive col-md-4" src="img/gallery/potok.jpg">
            <img class="img-responsive col-md-4" src="img/gallery/potok.jpg">
            <img class="img-responsive col-md-4" src="img/gallery/potok.jpg">
            <img class="img-responsive col-md-4" src="img/gallery/potok.jpg">
            <img class="img-responsive col-md-4" src="img/gallery/potok.jpg">
        </div>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <img class="img-responsive col-md-5" src="img/gallery/simon.jpg">
            <img class="img-responsive col-md-5" src="img/gallery/simon.jpg">
        </div>
</div>

Что мне попробовать? вот изображение

Answer 1

Вы можете смешивать класс и элементы;

возможный пример

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <img src="http://dummyimage.com/300x600" class="col-4">
    <div class="row wrap col-8">
      <img src="http://dummyimage.com/300x330" class="mb-auto col-6">
      <img src="http://dummyimage.com/300x330" class="mb-auto col-6">
      <img src="http://dummyimage.com/300x450" class="mt-auto col-4">
      <img src="http://dummyimage.com/300x450" class="mt-auto col-4">
      <img src="http://dummyimage.com/300x450" class="mt-auto col-4">
    </div>
  </div>
</div>

Answer 2

Вот предложение

.col {
  margin: 5px;
  height: 200px;
}

.col-4 {
  margin: 5px 0px;
}

.col-4,
.col {
  background-image: url(https://www.cowgirlcontractcleaning.com/wp-content/uploads/sites/360/2018/05/placeholder-img-3.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border: 1px solid red;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-8">
    <div class="row">
      <div class="col"></div>
      <div class="col"></div>
    </div>
    <div class="row">
      <div class="col"></div>
      <div class="col"></div>
    </div>
  </div>
  <div class="col-4"></div>
</div>