title: Bootstrap/CSS: Layout issues inside 3-columns layout
body: <p>I'm using Bootstrap 3 and I have a full width row with 3 <code>col-lg-4</code>, each column with an icon, a title and a subtitle. But now I'd like to place the icon and text side by side, like this:</p>
  
  <p><img src="https://i.stack.imgur.com/tqYLq.png" alt="Mockup"></p>
  
  <p>Initial HTML:</p>
  
  <pre><code>&lt;div class="cover-container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-lg-4"&gt;
        &lt;div class="tile"&gt;
          &lt;img src="" /&gt;
          &lt;h3&gt;Title&lt;/h3&gt;
          &lt;p&gt;Lorem ipsum&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div
      …
      …
    &lt;/div&gt;
  &lt;/div&gt;
  
  
  
  .cover-container {
     margin: 0 auto;
     width: 100%;
     padding: 0px;
  }
  .tile {
    text-align: center;
  }
  </code></pre>
  
  <p>I've tried with 8 <code>col-lg-2</code>, but I don't like that it shows each column as a row on a smartphone. 
  I prefer to use 3 centered <code>col-lg-4</code>, but I can not place elements like in the mock-up,
  can you help? Thanks…</p>
  
  <p><br><br><br></p>
  
  <p>SOLUTION:</p>
  
  <pre><code>&lt;div class="cover-container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-sx-4 col-sm-4 col-md-4 col-lg-4"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-xs-6 cover-tile-image"&gt;
                      &lt;img src="/assets/images/1.png" alt="" /&gt;
                  &lt;/div&gt;
                  &lt;div class="col-xs-6 cover-tile-text"&gt;
                      &lt;h3&gt;Title&lt;/h3&gt;
                      &lt;p&gt;Lorem ipsum&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt; 
              …
              …
      &lt;/div&gt; 
  &lt;/div&gt;
  
  
  .cover-tile-image {
      text-align: right;
      padding-right: 5px;
  }
  
  .cover-tile-text {
      padding-left: 5px;
  }
  </code></pre>