Startseite: Boxen nebeneinander stellen

<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>

@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;
}