jquery - 我想在页面调整大小时将一个 div 移动到容器下方，我该怎么做？

Question

我有以下结构。 http://i.stack.imgur.com/l59Zx.png {图片链接}

我想在调整窗口大小时移动底部的侧边栏，但我想不出办法。

这是我的一些代码

<div class="contentWrapper">
<div id="sidebar">.........</div>
<div class="content box">......</div>
</div>

CSS

.contentWrapper{
position: relative;
width:980px;
padding:91px 0 0 0;
margin:0 auto
}

#sidebar {
position: absolute;
top:100px; bottom:-100px; right:0;
width:200px;
background:#000;
}

.contentBox{
background:rgba(0, 0, 0, 0.8);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#cc000000,endColorstr=#cc000000); /* IE */
padding:30px 0;
margin:0 auto;
font-family:'Abel';
font-size:24px;
color:#fff;
text-align:center
}

Answer 1

实现此目的的最佳方法是使用 @media 查询。

在其余 CSS 代码的底部使用此代码。

@media (max-width: 768px){  /* mention the width here in px for which you want the sidebar to move down */
  #sidebar {
    position: relative;
    display: block;
  }
}

向上阅读:CSS media queries - Web developer guide | MDN