SOURCE

<!--并排排列-->
<div class="row">
    <div class="column">
                <h2>Column 第一列</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                    Maecenas sit amet pretium urna. 
                    Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, 
                    risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent 
                    scelerisque tortor sed accumsan convallis.</p>
    </div>
    <div class="column">
                <h2>Column 第二列</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                    Maecenas sit amet pretium urna. 
                    Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, 
                    risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent 
                    scelerisque tortor sed accumsan convallis.</p>
    </div>
    <div class="column">
                <h2>Column 第三列</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                    Maecenas sit amet pretium urna. 
                    Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, 
                    risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent 
                    scelerisque tortor sed accumsan convallis.</p>
    </div>
</div>

/*并排浮动*/
.column{
    float:left;
    width:33.3%;
    padding:15px;
}
/*清楚后面的浮动*/
.row:after{
    content:"";
    display:table;
    clear:both;
}
/*媒体查询*/
@media screen and(max-width: 600px){
    .column{
        width:100%;
    }
}