Siatka bootstrap

Question

Czy ktoś wie jak zrobić żeby ten długi obraz nie przestawiał tych na dole? Strona korzysta z bootstrapa 3.

Tutaj wklejam kod html i css:

.picture-link,
.picture-link > figure > figcaption,
.picture-link:hover{
    color: black;
    text-decoration: none;
}
.picture:hover{
    box-shadow: 0px 0px 20px #111111;
}

<section class="container mt-5">
    <div class="row">
      
      <div class="col-md-4">
        <a href="picture.html?id=1" class="picture-link">
          <figure class="picture">
            <img class="img-fluid" src="img/1.jpg">
            <figcaption>a</figcaption>
          </figure>
        </a>
      </div>
      <div class="col-md-4">
        <a href="picture.html?id=2" class="picture-link">
          <figure class="picture">
            <img class="img-fluid" src="img/3.jpg">
            <figcaption>a</figcaption>
          </figure>
        </a>
      </div>
      <div class="col-md-4">
        <a href="picture.html?id=3" class="picture-link">
          <figure class="picture">
            <img class="img-fluid" src="img/1.jpg">
            <figcaption>a</figcaption>
          </figure>
        </a>
      </div>
      <div class="col-md-4">
        <a href="picture.html?id=4" class="picture-link">
          <figure class="picture">
            <img class="img-fluid" src="img/1.jpg">
            <figcaption>a</figcaption>
          </figure>
        </a>
      </div>

    </div>
  </section>

 

Answer 1

Musiałbyś pobawić się marginesami ujemnymi, ale to mocno błędogenna zabawa.

Tutaj o wiele lepiej sprawdziłby się CSS Grid albo rozwiązania pokroju Isotope.

Answer 2

polecam flexbox, jezeli jego uzycie jest mozliwe przy tym projekcie.