bootstrap grid system to format picture - html

Question

i was using bootstrap grid system to format picture like:
this is my code :
<div class="row">
<div class="col-md-4">
<div class="well"><img src="..." class="img-responsive"">
<br/>
<br/>
<br/>
<br/>
<br/>
</div>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-6">
<div class="well"><img src="..." class="img-responsive" alt="Responsive image"></div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="well"><img src="..." class="img-responsive" alt="Responsive image"></div>
</div>
</div>
</div>
</div>
I want the picture to be responsive so I put class="img-responsive" on the <img>
<img src="..." class="img-responsive" alt="Responsive image">
but end up like the right picture. if i dont use class="img-responsive" the image will show on full resulution. how i fix this? (please give me a easy explanation because i'm a noob :) )

Answer 1

You can apply CSS Flexbox rules on .row & .col-*-*. I've used some custom classes (all the .col-*-* has a class called .item). Like:
.row {
display: flex;
}
.item {
display: flex;
flex-direction: column;
}
.item.left {
flex-direction: row;
}
Have a look at the snippet below:
.row {
display: flex;
}
.item {
display: flex;
flex-direction: column;
}
.item.left {
flex-direction: row;
}
.item.left .well {
width: 100%;
align-self: stretch;
}
.item.left .well img {
height: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="item left col-sm-4">
<div class="well"><img src="http://placehold.it/200x200" class="img-responsive">
</div>
</div>
<div class="item col-sm-8">
<div class="row">
<div class="col-sm-6">
<div class="well"><img src="http://placehold.it/100x100" class="img-responsive" alt="Responsive image"></div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="well"><img src="http://placehold.it/100x100" class="img-responsive" alt="Responsive image"></div>
</div>
</div>
</div>
</div>
Hope this helps!

Answer 2

You should use following HTML structure as you need left and right columns having equal width:
<div class="container">
<div class="row">
<div class="col-xs-6">
// content....
</div>
<div class="col-xs-6">
// content....
</div>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="well"><img src="..." class="img-responsive">
<br>
<br>
<br>
<br><br>
</div>
</div>
<div class="col-xs-6">
<div class="well"><img src="..." class="img-responsive" alt="Responsive image"></div>
<div class="well"><img src="..." class="img-responsive" alt="Responsive image"></div>
</div>
</div>
</div>