Bootstrap/CSS: Layout issues inside 3-columns layout - html

Question

I'm using Bootstrap 3 and I have a full width row with 3 col-lg-4, 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:
Initial HTML:
<div class="cover-container">
<div class="row">
<div class="col-lg-4">
<div class="tile">
<img src="" />
<h3>Title</h3>
<p>Lorem ipsum</p>
</div>
</div
…
…
</div>
</div>
.cover-container {
margin: 0 auto;
width: 100%;
padding: 0px;
}
.tile {
text-align: center;
}
I've tried with 8 col-lg-2, but I don't like that it shows each column as a row on a smartphone.
I prefer to use 3 centered col-lg-4, but I can not place elements like in the mock-up,
can you help? Thanks…
SOLUTION:
<div class="cover-container">
<div class="row">
<div class="col-sx-4 col-sm-4 col-md-4 col-lg-4">
<div class="row">
<div class="col-xs-6 cover-tile-image">
<img src="/assets/images/1.png" alt="" />
</div>
<div class="col-xs-6 cover-tile-text">
<h3>Title</h3>
<p>Lorem ipsum</p>
</div>
</div>
</div>
…
…
</div>
</div>
.cover-tile-image {
text-align: right;
padding-right: 5px;
}
.cover-tile-text {
padding-left: 5px;
}

Answer 1

I'm just going to point out to y'all that:
class="col-xs-4 col-sm-4 col-md-4 col-lg-4"
is extremely redundant, and equivalent to the much-simpler:
class="col-xs-4"
I encourage y'all to read Bootstrap's grid docs:
Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col-md- class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg- class is not present.

Answer 2

I'm still new in using bootstrap 3. Check the demo below I created. Hope this helps.
Fiddle
HTML
<div class=".col-xs-4 col-sm-4 col-md-4 col-lg-4">
<div class="tile">
<img src="http://placekitten.com/g/64/64" class="img-thumbnail" />
</div>
<div class="info">
<h3>Title</h3>
<p>Lorem ipsum</p>
</div>
</div>
CSS
.tile, .info {
float:left;
}

Answer 3

Here is the solution :) with working example.
Find here more information about the grids.
This solution is also RESPONSIVE READY.
HTML:
<div class="row well">
<div class="col-sx-4 col-sm-4 col-md-4 col-lg-4">
<div class="row ">
<div class="col-sx-3 col-sm-3 col-md-3 col-lg-3">
<img src="//placehold.it/50x50" />
</div>
<div class="col-sx-9 col-sm-9 col-md-9 col-lg-9">
<h3>Title</h3>
<p>Lorem ipsum</p>
</div>
</div>
</div> <div class="col-sx-4 col-sm-4 col-md-4 col-lg-4">
<div class="row ">
<div class="col-sx-3 col-sm-3 col-md-3 col-lg-3">
<img src="//placehold.it/50x50" />
</div>
<div class="col-sx-9 col-sm-9 col-md-9 col-lg-9">
<h3>Title</h3>
<p>Lorem ipsum</p>
</div>
</div>
</div> <div class="col-sx-4 col-sm-4 col-md-4 col-lg-4">
<div class="row ">
<div class="col-sx-3 col-sm-3 col-md-3 col-lg-3">
<img src="//placehold.it/50x50" />
</div>
<div class="col-sx-9 col-sm-9 col-md-9 col-lg-9">
<h3>Title</h3>
<p>Lorem ipsum</p>
</div>
</div>
</div>
</div>
CSS
h3{margin:0;}

Answer 4

HTML
<div id="wrapper">
<div class="row">
<div class="columns">
<img src="//placehold.it/100x100" />
</div>
<div class="columns">
<h3>Title</h3>
<p>Lorem ipsum</p>
</div>
</div>
<div class="row">
<div class="columns">
<img src="//placehold.it/100x100" />
</div>
<div class="columns">
<h3>Title</h3>
<p>Lorem ipsum</p>
</div>
</div>
<div class="row">
<div class="columns">
<img src="//placehold.it/100x100" />
</div>
<div class="columns">
<h3>Title</h3>
<p>Lorem ipsum</p>
</div>
</div>
</div>
CSS
#wrapper
{
width:1000px;
margin:0px;
padding:0px;
}
.columns
{
float:left;
display:inline-block;
width:120px;
height:110px;
}
Demos
Fiddle Demo
Result Demo
Output