基于bootstrap的响应式设计

Question

页面分为左右两栏，一般是这么搞的：

<div class="row">
    <div class="col-md-3 sidebar"></div>
    <div class="col-md-9 content"></div>
</div>

在桌面浏览器上希望左右3:9的布局，但是在手机上面希望sidebar默认隐藏，点击某个按钮然后悬浮于main之上，不用js单靠media query能不能实现呢？

补充：点击后显示肯定是要靠事件触发的，我是说点击之后sidebar 和 content的样式

Answer 1

CSS没有点击事件

Answer 2

影藏简单

<div class="row">
    <div class="col-md-3 sidebar hidden-xs"></div>
    <div class="col-md-9 col-xs-12 content"></div>
</div>

这样就ok了
但是 你想点击显示 就得走事件了~不自己定义肯定不行~