引导程序3列，图像和文本响应

Question

下面的代码显示3列，每列都有一个图像和文本，可在较小屏幕上调整大小，最后在智能手机上调整为1列。有两个问题：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 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>

希望这有助于！