Бутстрап 3 столбца с изображением и текстовым ответом

Question

В приведенном ниже коде представлены 3 столбца, каждый из которых имеет изображение и текст, которые изменяются на меньший экран и, наконец, на 1 столбец на смартфоне. Есть 2 проблемы: 1/на самом маленьком экране, изображение слишком велико и 2/текст находится под изображением (например, на большом экране), но я хочу его на боковой стороне изображения (половина размера самого маленького экрана).

Я посмотрел на много примеров, но я не могу найти что-то просто ...

Как я могу добиться этого легко с 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

Вы можете использовать CSS Flexbox.

Посмотрите на это Codepen.

Или взглянуть на фрагменте код ниже (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>

Надеется, что это помогает!