title: Bootstrap 3 columns with image & text responsive
body: <p>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).  </p>
  
  <p>I looked at many example, but I can not find something simple...</p>
  
  <p>How can I achieve this easily with Bootstrap?</p>
  
  <pre><code>&lt;div class="container BSC_Angel"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-12 text-center"&gt;
        &lt;div class="col-sm-4 text-center" style=""&gt;
          &lt;div&gt;image 1&lt;/div&gt;
          &lt;div&gt;text 1&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-sm-4 text-center" style=""&gt;
          &lt;div&gt;image 2&lt;/div&gt;
          &lt;div&gt;text 2&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-sm-4 text-center" style=""&gt;
          &lt;div&gt;image 3&lt;/div&gt;
          &lt;div&gt;text 3&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>