Resposive Design div

[borjagat]

Hola
como puedo hacer para mostrar este div si la pantalla es más estrecha de una determinada resolución como un select? Es un menu y quisiera cambiarlo por un select?
<div id="sidebar" class="span3">
<div class="sidebar-nav">
<div class="moduletable">
<table border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr align="left"><td><a href="/otraweb/index.php/proyecto" class="mainlevelmenuIzqdaClass">Proyecto</a></td></tr><tr align="left"><td><a href="/otraweb/index.php/historia" class="mainlevelmenuIzqdaClass">Historia</a></td></tr><tr align="left"><td><a href="/otraweb/index.php/ensayos" class="mainlevelmenuIzqdaClass">Ensayos</a></td></tr><tr align="left"><td><a href="/otraweb/index.php/formar" class="mainlevelmenuIzqdaClass">Formar Parte </a></td></tr></tbody></table> </div>

</div>
</div>

[xfxstudios]

con las media querys puedes hacer eso:

Código PHP:

<style type="text/css">
@media screen and (min-width:500px){
.moduletable{
    display:block;
}
.menu2{
    display:none;
}
}
@media screen and (max-width:480px){
.moduletable{
    display:none;
}
.menu2{
    display:block;
}
 
}
 
</style>
 
<div id="sidebar" class="span3">
    <div class="sidebar-nav">
 
        <div class="moduletable">
                <table border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tbody>
                        <tr align="left">
                            <td><a href="/otraweb/index.php/proyecto" class="mainlevelmenuIzqdaClass">Proyecto</a></td>
                        </tr>
                        <tr align="left">
                            <td><a href="/otraweb/index.php/historia" class="mainlevelmenuIzqdaClass">Historia</a></td>
                        </tr>
                        <tr align="left"><td><a href="/otraweb/index.php/ensayos" class="mainlevelmenuIzqdaClass">Ensayos</a></td>
                        </tr>
                            <tr align="left"><td><a href="/otraweb/index.php/formar" class="mainlevelmenuIzqdaClass">Formar Parte </a></td>
                       </tr>
                 </tbody>
            </table> 
        </div>
        <div class="menu2">
        <select name="menu">
            <option>Proyecto</option>
            <option>Historia</option>
            <option>Ensayos</option>
            <option>Formar Parte</option>
        </select>
        </div>
 
    </div>
</div>
 

algo asi seria mas o menos