Bootstrap 3列，具有图像和文本响应功能

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!