Bootstrap 3 columns with image & text responsive - css

Question

The code below displays 3 columns, each with an image and text that resize down on a smaller screen and finally to 1 column on a smartphone. There are 2 problems : 1/ on the smallest screen, the image is too big and 2/ the text is under the image (like on the big screen) but I want it on the side of the image (half size of the smallest screen).
I looked at many example, but I can not find something simple...
How can I achieve this easily with Bootstrap?
<div class="container BSC_Angel">
<div class="row">
<div class="col-md-12 text-center">
<div class="col-sm-4 text-center" style="">
<div>image 1</div>
<div>text 1</div>
</div>
<div class="col-sm-4 text-center" style="">
<div>image 2</div>
<div>text 2</div>
</div>
<div class="col-sm-4 text-center" style="">
<div>image 3</div>
<div>text 3</div>
</div>
</div>
</div>
</div>

Answer 1

You can use CSS Flexbox.
Have a look at this Codepen.
Or have a look at the snippet below (use full screen to view this properly):
.content-holder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 20px 0;
}
/* On Mobiles (screen width <= 767px) */
#media screen and (max-width: 767px) {
.content-holder {
flex-direction: row;
}
.text-div {
margin-left: 10px;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container BSC_Angel">
<div class="row">
<div class="col-md-12 text-center">
<div class="col-sm-4 text-center" style="">
<div class="content-holder">
<div class="img-div"><img src="http://placehold.it/100x100" alt=""></div>
<div class="text-div">Text 1</div>
</div>
</div>
<div class="col-sm-4 text-center" style="">
<div class="content-holder">
<div class="img-div"><img src="http://placehold.it/100x100" alt=""></div>
<div class="text-div">Text 2</div>
</div>
</div>
<div class="col-sm-4 text-center" style="">
<div class="content-holder">
<div class="img-div"><img src="http://placehold.it/100x100" alt=""></div>
<div class="text-div">Text 3</div>
</div>
</div>
</div>
</div>
</div>
Hope this helps!