Boostrap как добавить IMG выровнять с другими IMG

Question

Здравствуйте, у меня проблема с моим кодом:

<div class="row">
            <div class="col-4"><img src="https://www.plumenshopus.com/i/2018/08/four-chaleur-tournante-pyrolyse-candy-fcpk-electrique-encastrable-symbole-brandt-darty-pulsee-brassee-electrolux-gaz-air-brasse-vapeur-smeg-catalyse-mini-ariston-pulse-difference-615x385.jpg" alt="bloc1" /></div>
            <div class="col-4"><img src="https://www.plumenshopus.com/i/2018/08/four-chaleur-tournante-pyrolyse-candy-fcpk-electrique-encastrable-symbole-brandt-darty-pulsee-brassee-electrolux-gaz-air-brasse-vapeur-smeg-catalyse-mini-ariston-pulse-difference-615x385.jpg" alt="bloc1" /></div>
        </div>
        <div class="row">
            <div class="col-4"><img src="https://www.plumenshopus.com/i/2018/08/four-chaleur-tournante-pyrolyse-candy-fcpk-electrique-encastrable-symbole-brandt-darty-pulsee-brassee-electrolux-gaz-air-brasse-vapeur-smeg-catalyse-mini-ariston-pulse-difference-615x385.jpg" alt="bloc1" /></div>
            <div class="col-4"><img src="https://www.plumenshopus.com/i/2018/08/four-chaleur-tournante-pyrolyse-candy-fcpk-electrique-encastrable-symbole-brandt-darty-pulsee-brassee-electrolux-gaz-air-brasse-vapeur-smeg-catalyse-mini-ariston-pulse-difference-615x385.jpg" alt="bloc1" /></div>
        </div>

И у меня есть такой результат: результат начальной загрузки

И я хочу еще одного, мне нравится это:

окончательный результат

Как я могу добавить другое изображение с начальной загрузкой для окончательных результатов?

Спасибо

Answer 1

Согласно моей интерпретации вашего вопроса, использование 2 столбцов внутри строки и дальнейшее деление первого столбца на столбцы будет работать.

<div id="container">
  <div class="row main">
    <div class="col-8">
      <div class="row">
        <div class="col">
          <img src="https://picsum.photos/300/600" class="img-fluid" alt="">
        </div>
        <div class="col">
          <img src="https://picsum.photos/300/600" class="img-fluid" alt="">
        </div>
      </div>
      <div class="row">
        <div class="col">
          <img src="https://picsum.photos/300/600" class="img-fluid" alt="">
        </div>
        <div class="col">
          <img src="https://picsum.photos/300/600" class="img-fluid" alt="">
        </div>
      </div>
    </div>
    <div class="col-4">
      <img src="https://picsum.photos/300/1200" class="img-fluid" alt="">
    </div>
  </div>
</div>

Демо: https://stackblitz.com/edit/js-tcjrtb

Поправьте меня, если мое понимание вопроса неверно.

Answer 2

<div class="container">
  <div class="row">
    <div class="col"><img src="" alt="bloc1" /></div>
    <div class="col"><img src="" alt="bloc1" /></div>
    <div class="col"><img src="" alt="bloc1" /></div>
  </div>
  <div class="row">
    <div class="col"><img src="" alt="bloc1" /></div>
    <div class="col"><img src="" alt="bloc1" /></div>
    <div class="col"><img src="" alt="bloc1" /></div>
  </div>
  </div>

Этот код должен работать. Простое применение документации начальной загрузки

См. Пример Codepen