4 bom por linha

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>4 Box Por Linha</title>
    </head>
    <body>
        <style>
            .box-pai {
                width: 1300px;
                margin: auto;
                border: 2px solid #EEE;
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                -webkit-flex-wrap: wrap;
                -ms-flex-wrap: wrap;
                flex-wrap: wrap;
            }
            .box-filho {
                flex-direction: column;
                flex-basis: 25%;
                font-size: 40px;
                text-align: center;
                line-height: 132px;
                color: #FFFFFF;
            }
        </style>

        <div class="box-pai">
            <div class="box-filho" style="background-color: #46DBFF;">1</div>
            <div class="box-filho" style="background-color: #2CD6FF;">2</div>
            <div class="box-filho" style="background-color: #13D1FF;">3</div>
            <div class="box-filho" style="background-color: #00C8F8;">4</div>
            <div class="box-filho" style="background-color: #00C8F8;">5</div>
            <div class="box-filho" style="background-color: #00B3DF;">6</div>
            <div class="box-filho" style="background-color: #009FC5;">7</div>
            <div class="box-filho" style="background-color: #008AAC;">8</div>
            <div class="box-filho" style="background-color: #008AAC;">9</div>
            <div class="box-filho" style="background-color: #008AAC;">10</div>
            <div class="box-filho" style="background-color: #008AAC;">11</div>
            <div class="box-filho" style="background-color: #008AAC;">12</div>
        </div>


    </body>
</html>