ブートストラップ画像とテキストが反応する3列

Question

以下のコードは、3つの列を表示します。各列には、画像とテキストが小さな画面に縮小され、最後にスマートフォンに1列表示されます。 2つの問題があります：1 /最小画面では、画像が大きすぎると2 /テキストが画像の下にあります（大きな画面のような）が、私はそれを画像の側面にしたい（最小画面の半分のサイズ）。

私は多くの例を見て、私はシンプルなものを見つけることができません...

は、どのように私はブートストラップで簡単にこれを達成することができますか？

<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フレキシボックスを使用することができます。

これをご覧ください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>

・ホープ、このことができます！