Wie Sie erscheinen Bilder auf der linken Seite des Textes in Bootstrap

Question

Im Versuch, die Wirkung in this theme

ich habe unten mit Text bekam 4 Icons bisher gesehen zu replizieren, die nicht genau das, was ich will,

<div class="gridContainer"> 
    <!-- Sections of page, used for smooth scrolling --> 
    <section id="about" class="smooth-scroll"> 
     <!-- Four column grid system --> 
     <div class="col-sm-3 text-lefts"> 
     <!-- Grid content goes here --> 
     <img class="productIcon" src="images/closed-door-with-border-silhouette.png" alt="Doors" /> 
     <h4>Doors</h4> 
     <p>Delivered in your choice of facing-veneered, laminated or primed for internal painting, certified fire rating, factory glazed to your design and prepared for your lock fitting.</p> 
     </div> 
     <div class="col-sm-3 text-left"> 
     <!-- Grid content goes here --> 
     <img class="productIcon" src="images/closed-doors-with-windows.png" alt="Door sets" /> 
     <h4>Doorsets</h4> 
     <p>The easy way to ensure the co-ordination and quality of your interior design specification. Simply select your components and leave the rest to us.</p> 
     </div> 
     <div class="col-sm-3 text-left"> 
     <!-- Grid content goes here --> 
     <img class="productIcon" src="images/locked-padlock.png" alt="Security doors" /> 
     <h4>Security Doors</h4> 
     <p>Guaranteed protection with a line of defence that is the recognised industry leader in timber based security door systems. </p> 
     </div> 
     <div class="col-sm-3 text-left"> 
     <!-- Grid content goes here --> 
     <img class="productIcon" src="images/portable-toilet-doors.png" alt="Washroom cubicles" /> 
     <h4>Washroom Cubicles</h4> 
     <p>Choose from an extensive range of colours and sizes available to suit many applications in the construction and leisure industries.</p> 
     </div> 
    </section> 
    </div> 

Kann mir jemand helfen?

Answer 1

http://www.bootply.com/VTVCNOYllG#

<div class="container2" style="display:table"> 
    <div style="width:100px; display:table-cell; vertical-align:top;"> 
    <img src="http://ecx.images-amazon.com/images/I/21-leKb-zsL._SL500_AA300_.png" style="float:left; width:50px; height:50px;"></div> 
    <div style="width:300px; display:table-cell; vertical-align:top;">Lorem ipsum 
    Integer posuere quam sem. Sed congue pharetra felis et sollicitudin. 
    Lorem ipsum Integer posuere quam sem. Sed congue pharetra felis et sollicitudin.</div> 
</div> 

Answer 2

Ilses Bootstrap Media object dass Anzeige zu imitieren.

<div class="media"> 
    <div class="media-left"> 
    <img class="media-object" src="..." alt="..."> 
    </div> 
    <div class="media-body"> 
    <h4 class="media-heading">Media heading</h4> 
    ... 
    </div> 
</div>