当屏幕宽度减小时，在Html页面上换行菜单

Question

我在css中使用媒体查询隐藏菜单并显示超链接，点击超链接我显示包装菜单。是否有任何默认的方法来实现响应式设计？

代码

<a id="advanced_menu_toggle" href="#mobile-advanced">menu</a>
<div class="row" id="mobile-advanced">
    <div class="span2">
        <a id="hide" style="font-size:x-large" href="#">Close</a>
    </div>
    <div class="span3">
        <img src="test.jpg" style="position: inherit" width="50%" height="50%" align="right" />
    </div>
    <div id="Div2" class="span8" style="float: left">
        <br /><br />
        <a href="Techesperto.html" style="font-size:x-large">Home</a>
        <br /><br />
        <a href="About" style="font-size:x-large">About Us</a>
        <br /><br />
        <span>
            <nav id="nav" role="navigation">
                <li>
                    <a href="#" style="font-size:x-large">Partners</a>
                    <ul  style="position:relative" >
                        <li id="LM1" style="float:inherit"><a href="#" style="font-size:x-large">Laptops</a></li>
                        <li id="LM2" style="float:inherit"><a href="#" style="font-size:x-large">Monitors</a></li>
                        <li id="LM3" style="float:inherit"><a href="#" style="font-size:x-large">Printers</a></li>
                    </ul>
                </li>
            </nav>
        </span>
        <br /><br />
        <a href="Contact.html" style="font-size:x-large">Contact</a>
    </div>
    <br /><br />
    <a href="Services.html" style="font-size:x-large">Services</a>
</div>

http://jsfiddle.net/isherwood/4AjRh/