css issue when the window-size is reduced

this is my html code, i want to display single div class="box1" one after the other when the window size is too small to fit multiple boxes and also that they can adjust themselves while resizing the window screen.. Can someone please provide me the CSS code.. Thanks in advance..

<section id="one" class="wrapper style1">
    <div class="container1">
        <div class="row1 no-collapse-1">        
            <section class="4u"> 
                <div class="box1">
                    <h3> Skin Care </h3>
                        <a href="#" class="image featured"><img src="app/views/pages/user/images/pic01.jpg" alt=""></a>
                    <br>
                    <a href="#" class="button">Explore</a> 
                </div>
            </section>  

            <section class="4u"> 
                <div class="box1">
                    <h3> Hair Care </h3>
                    <a href="#" class="image featured"><img src="app/views/pages/user/images/pic01.jpg" alt=""></a>
                    <br>
                    <a href="#" class="button">Explore</a> 
                </div>
            </section>

            <section class="4u"> 
                <div class="box1">
                    <h3> Body Care </h3>
                    <a href="#" class="image featured"><img src="app/views/pages/user/images/pic01.jpg" alt=""></a>
                    <br>
                    <a href="#" class="button">Explore</a> 
                </div>
            </section>

        </div>
    </div>
</section>

css:

    .container1 {
        margin-left: auto;
        margin-right: auto;

        /* width: (containers) */
        width: 1200px;
    }

    /* Modifiers */

        .container1.small {
            /* width: (containers) * 0.75; */
            width: 900px;
        }

        .container1.big {
            width: 100%;

            /* max-width: (containers) * 1.25; */
            max-width: 1500px;

            /* min-width: (containers); */
            min-width: 1200px;
        }

    /* Grid */

    .31 2u { width: 100% }
    .31 1u { width: 91.6666666667% }
    .31 0u { width: 83.3333333333% }
    .39 u { width: 75% }
    .38 u { width: 66.6666666667% }
    .37 u { width: 58.3333333333% }
    .36 u { width: 50% }
    .35 u { width: 41.6666666667% }
    .34 u { width: 33.3333333333% }
    .33 u { width: 25% }
    .32 u { width: 16.6666666667% }
    .31 u { width: 8.3333333333% }
    .-11u { margin-left: 91.6666666667% }
    .-10u { margin-left: 83.3333333333% }
    .-9u { margin-left: 75% }
    .-8u { margin-left: 66.6666666667% }
    .-7u { margin-left: 58.3333333333% }
    .-6u { margin-left: 50% }
    .-5u { margin-left: 41.6666666667% }
    .-4u { margin-left: 33.3333333333% }
    .-3u { margin-left: 25% }
    .-2u { margin-left: 16.6666666667% }
    .-1u { margin-left: 8.3333333333% }


@media screen and (max-width: 1680px) {

        .container1.31 2525 {
            width: 100%;
            max-width: 100em;
            min-width: 80em;
        }

        .container1.37 525 {
            width: 60em;
        }

        .container1.35 025 {
            width: 40em;
        }

        .container1.32 525 {
            width: 20em;
        }

        .container1 {
            width: 80em;
        }

    }

    @media screen and (max-width: 1280px) {

        .container1.31 2525 {
            width: 100%;
            max-width: 81.25em;
            min-width: 65em;
        }

        .container1.37 525 {
            width: 48.75em;
        }

        .container.35 025 {
            width: 32.5em;
        }

        .container1.32 525 {
            width: 16.25em;
        }

        .container1 {
            width: 65em;
        }

    }

    @media screen and (max-width: 980px) {

        .container1.31 2525 {
            width: 100%;
            max-width: 112.5%;
            min-width: 90%;
        }

        .container1.37 525 {
            width: 67.5%;
        }

        .container1.35 025 {
            width: 45%;
        }

        .container1.32 525 {
            width: 22.5%;
        }

        .container1 {
            width: 90% !important;
        }

    }

    @media screen and (max-width: 736px) {

        .container1.31 2525 {
            width: 100%;
            max-width: 112.5%;
            min-width: 90%;
        }

        .container1.37 525 {
            width: 67.5%;
        }

        .container1.35 025 {
            width: 45%;
        }

        .container1.32 525 {
            width: 22.5%;
        }

        .container1 {
            width: 90% !important;
        }

    }

    @media screen and (max-width: 480px) {

        .container1.31 2525 {
            width: 100%;
            max-width: 112.5%;
            min-width: 90%;
        }

        .container1.37 525 {
            width: 67.5%;
        }

        .container1.35 025 {
            width: 45%;
        }

        .container1.32 525 {
            width: 22.5%;
        }

        .container1 {
            width: 90% !important;
        }

    }


    .box1 {
        padding: 3em 2em;
        background: #FFF;
        text-align: center;
        border-radius: 0px 0px 6px 6px;
    }