javascript - 如何删除侧边栏以使网页更具响应性

Question

我的网页设计包括一个侧边栏和文章部分。在调整网页大小时，侧边栏应该消失，新按钮应该出现在右边。但是，我不明白如何使侧边栏消失并在右侧放置新的侧边栏。我该怎么办？

页面

________  _____                                  _________  ___
|      |  |   |   after re-sizing viewport,      |        | | |
|      |  |   |   I should get this web page --> |        | |_|
|      |  |   |                                  |        | 
|      |  |   |                                  |        |
|______|  |___|                                  |________|

我已经实现了 index html 之类的；

<link   href="css/large-page-design.css"    
        rel="stylesheet"    
        type="text/css" />

<link   href="css/medium-page-design.css"  
        rel="stylesheet"    
        type="text/css" 
        media="only screen and (min-width: 700px ) and (max-width: 1000px) and (min-height: 500px)">

并且，在 index.html 中，我填充了侧边栏内容；

<div id="sidebar">

    <div id="page-information">
            <h1>My web page</h1>
    </div>
    <!-- other two div elements with its content-->
</div>

除了html，我还声明了large-page-design.css为;

@import url('sidebar.css') screen;

#sidebar{
    top:0px;
    height: 519px; 
    width: 325px;
    float: right;
    background: none; 
    position:relative; 
}

并且，在 sidebar.css 中，我有；

#page-information{
    background-image:url(...);
    background-repeat: no-repeat;
    height: 75px;
    width: 300px;
    position:relative;
}

Answer 1

使用媒体查询隐藏侧边栏并使用显示属性显示按钮

在 large-page-design.css 中添加这个

#sideButton{
   display:none;
   }

在 medium-page-design.css 中添加这个

 #sidebar{
     display:none;
   }
   #sideButton{
     display:block;
    }

在 Html 中有一个 #sideButton 元素