Dafür nimmst du am besten das Flexbox-Modell:
http://www.html5rocks.com/de/tutorials/flexbox/quick/
Beispiel:
HTML:
HTML
<div class="homepageContent">
<div class="homepageContentBox1">
Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1
Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1
</div>
<div class="homepageContentBox2">
Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2
</div>
<div class="homepageContentBox3">
Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3
Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3
</div>
</div>
Alles anzeigen
CSS:
CSS
@media screen and (min-width: 801px) {
.homepageContent {
display: flex;
}
.homepageContentBox1,
.homepageContentBox2 {
margin-right: 14px;
}
.homepageContent > div {
width: 32%;
}
}
@media screen and (max-width: 800px) {
.homepageContentBox1,
.homepageContentBox2 {
margin-bottom: 14px;
}
.homepageContent > div {
width: 100%;
}
}
.homepageContent > div {
box-sizing: border-box;
border: 1px solid #000;
padding: 14px 21px;
color: #fff;
}
.homepageContentBox1 {
background: #990000;
}
.homepageContentBox2 {
background: #009900;
}
.homepageContentBox3 {
background: #000099;
}
Alles anzeigen
Relevant ist in dem Fall nur das hier:
Damit kannst du Elemente in einer Reihe ausrichten.
Edit:
Oder so: https://jsfiddle.net/4emLcxy3/