title: How to align images and text according to screen size?
body: <p>I am new to Bootstrap and need help please.</p>
  
  <p>I have text and images divided in four columns as you can see in my code. I have set alignment according to screen size using media queries (as shown in CSS). BUT if I am resizing the window and reach at the screen size of a tablet view you can say (check Screenshot No. 1) it looks quiet messy as the text is too large and image is too close to the text. So, at THIS screen size i.e. Tablet view, I want my columns to be aligned vertically (like Screenshot No. 2) but I want my image to be on the left side and the text and headings should be next to the image. BUT it shouldn't disturb the Mobile view as everything gets in center in mobile view (check Screenshot No.3) which is perfect for me already.</p>
  
  <p>If still my question is not clear enough then please check the template <a href="http://www.templatemonster.com/demo/58152.html" rel="nofollow">http://www.templatemonster.com/demo/58152.html</a></p>
  
  <p>They have section of "Work Team" which I like to have.</p>
  
  <p>I look forward to get help!</p>
  
  <p>Thank you!</p>
  
  <pre><code>&lt;div class="jumbotron"&gt;
  &lt;div id="wrapper"&gt; &lt;!--Wrapper--&gt;
      &lt;div class="container"&gt; &lt;!--Container--&gt;
          &lt;div class="row" style="padding-bottom: 40px;"&gt;
              &lt;div class="col-md-12" align="center"&gt;
                  &lt;h1&gt;Meet Us&lt;/h1&gt;&lt;hr class="style1"&gt;&lt;/hr&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="row"&gt;
              &lt;div class="col-sm-3"&gt;
                  &lt;img src="images/11.jpg" class="img-circle img-responsive" width="180"/&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-3"&gt;
                  &lt;h2 class="style1"&gt;Shaikh Obaidullah&lt;/h2&gt;
                  &lt;h3 class="style1"&gt;CEO / Web Developer&lt;/h3&gt;
                  &lt;hr class="style2"&gt;&lt;/hr&gt;
                  &lt;p class="style1"&gt;I will be taking care of product development stages such as Requirements, Development, Functionality, Usability, and Technical Support.&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-3"&gt;
                  &lt;img src="images/12.jpg" class="img-circle img-responsive" width="180"/&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-3"&gt;
                  &lt;h2 class="style1"&gt;Ovais M. Shaikh&lt;/h2&gt;
                  &lt;h3 class="style1"&gt;Graphic Designer&lt;/h3&gt;
                  &lt;hr class="style2"&gt;&lt;/hr&gt;
                  &lt;p class="style1"&gt;I will spice up your product with creative and unique designs so that you get the most attracted product in the end.&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt; &lt;!--Container-END--&gt;
  &lt;/div&gt; &lt;!--Wrapper-END--&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>    .jumbotron {
      background-image: url('../images/13.jpg');
      background-attachment: fixed;
      padding-top: 0px;
      padding-bottom: 0px;
      margin-bottom: 0px;
  }
  
  .img-responsive {
      margin: 0 auto;
  }
  
  #wrapper {
      background-color: #FFF;
      background: rgba(0,0,0,.7);
      color: #FFF;
      padding-bottom: 40px;
  }
  
  
  hr.style1 {
      margin-bottom: 30px;
      margin-top: 30px;
      width: 100px;
      border-top: 2px solid #8884bc;
  }
  
  
  @media (min-width: 768px) {
  h2.style1{
      color: #8884bc;
      text-align: left;
      margin-bottom: 0px;
  }
  
  h3.style1{
      text-align: left;
      margin-top: 10px;
  }
  
  hr.style2 {
      margin-bottom: 50px;
      margin-top: 50px;
      margin-left: 0px;
      width: 100px;
      border-top: 2px solid #8884bc;
  }
  
  p.style1{
      font-size: 20px;
      text-align: left;
      color: #eee;
  }
  
  .jumbotron{
      margin-bottom: 0px;
  }
  }
  
  @media only screen and (max-width:768px) {
  hr.style2 {
      margin-bottom: 30px;
      width: 100px;
      border-top: 2px solid #8884bc;
  }
  
  h2.style1{
      color: #8884bc;
      text-align: center;
      margin-bottom: 0px;
  }
  
  h3.style1{
      text-align: center;
      margin-top: 5px;
      font-size: 20px;
  }
  
  p.style1{
      margin-bottom: 80px;
      font-size: 16px;
      text-align: center;
      color: #eee;
  }
  }
  </code></pre>