Q:

Responsive three column div layout

I am developing a footer in a three column layout. I need this footer to be responsive that each div is stacked under each other on mobile devices excluding tablets.
This is the HTML:
<div id="footer-pages">

<div class="footer-container">  
    <div id="one">
        container1
    </div>

    <div id="two">
        container2
    </div>

    <div id="three">
        container3
    </div>
</div>
</div>

This is the CSS:
#footer-pages{
    width:100%;
    height:100px;
background-color:red;    
}

.footer-container{
   width:70%;
    margin-left:auto;
    margin-right:auto;
   }

#one, #two, #three{
    width:30%;
    float:left;
    }

Here is also a fiddle of where I managed to achieve yet: http://jsfiddle.net/5L2RY/
Can someone guide me how to achieve this ?

A:

Add this at end of css:
@media screen and (max-width: 768px) {
    #one, #two, #three{
        width:auto;
        float:none;
        display:block;
    }
}

JSFiddle
About Media queries

