Responsive CSS - It's Begining

<meta name="viewport" content="width=device-width, initial-scale=1"/>

<style type="text/css">
    body {
        margin: 0;
        padding: 0;
    }

    html {
        font-family: sans-serif;
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%
    }

    .component {
        width: 33.33333333%;
        float: left;
        border: none;
        text-align: center;
    }

    .component .element {
        border: 1px solid #a7a7a7;
        padding: 10px;
    }

    /* For Tablets */
    @media screen and (min-width: 600px) and (max-width: 999px) {
        .component {
            width: 50%;
        }
    }

    /* For Mobiles */
    @media screen and (min-width: 0px) and (max-width: 599px) {
        .component {
            width: 100%;
        }
    }
</style>

<div>
    <div class="component"><div class="element">A</div></div>
    <div class="component"><div class="element">B</div></div>
    <div class="component"><div class="element">C</div></div>
    <div class="component"><div class="element">D</div></div>
    <div class="component"><div class="element">E</div></div>
    <div class="component"><div class="element">F</div></div>
</div>