Как поставить 3 изображения рядом, как это?

Question

Я пытаюсь использовать bootstrap для решения этой проблемы, но безуспешно.

Код:

<div class="row hall-images">
    <div class=" col-lg-6 col-12"><img src="image1.png">
    </div>
    <div class="col-lg-6 col-12">
        <div class="row">
            <div class="col-12"><img src="image2.png">
            </div>
            <div class="col-12"><img src="image3.png" >
            </div>
        </div>
    </div>
</div>

Answer 1

Это пример с FlexBox, FlexBox действительно полезен для выравнивания элементов, посмотрите здесь: https://www.w3schools.com/css/css3_flexbox.asp

.outer{height: auto;width:500px;display:flex;flex-direction:row;border:1px solid red;}
.inner-left{height: 300px;width:50%;border:1px solid red;}
.fullimg{height:100%;width:100%;border:1px solid red;}
.inner-right{height:300px;width:50%;display:flex;flex-direction:column;border:1px solid red;}
.smallimg{width:100%;height:50%;border:1px solid red;}
@media only screen and (max-width: 425px){.outer{flex-direction:column!important;}}

<div class="outer">
  <div class="inner-left">
    <img class="fullimg" src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
  </div>
  <div class="inner-right">
    <img class="smallimg" src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
    <img class="smallimg" src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
  </div>
</div>

Answer 2

В зависимости от версии BS вам нужно создать разметку следующим образом:

  <div class="container">
     <div class="row">
        <div class="col-md-6 col-sm-12">
           <div>big content</div> 
        </div>
        <div class="col-md-6 col-sm-12">
           <div class="row">
             <div class="col-md-12 col-sm-12"><div>small content 1</div></div>  
             <div class="col-md-12 col-sm-12"><div>small content 2</div></div>
           </div>
        </div>
    </div>
  </div>

Answer 3

Это должно сработать.

div{
  border: 1px solid black;
}

.row{
  height: 200px; /*What ever you want */
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<div class="row">
  <div class="h-100 w-50"></div>
  <div class="w-50 d-flex flex-column">
    <div class="h-50 w-100"></div>
    <div class="h-50 w-100"></div>
  </div>
</div>