Html 3列堆叠布置，两侧边栏响应设计

我正在设计一个3栏的布局，用于一个响应迅速且便于移动的网站，其中两栏将位于内容区域的两侧。以下是我一直倾向于遵循的典型结构

<div id="inner-container">
    <aside id="left-sidebar">
       LEFT SIDEBAR
    </aside>
    <div id="content">
       CONTENT
    </div>
    <aside id="right-sidebar">
       RIGHT SIDEBAR
    </aside>
    <div class="clearfix"></div>
</div> <!-- #inner-container -->

将订单发送至可视化网站，以便：

[内容][左侧边栏][右侧边栏]

我如何将这三个项目按这样的顺序堆叠起来，并将各自的CSS放入其中，这样我就可以实现类似于1的web外观，而在类似于2的移动设备中实现外观

---

如果您知道宽度，只需将调整大小上的位置从绝对更改为相对

HTML:

---

我从来没有尝试过绝对定位堆叠div。浏览器和内容安全吗？如果你是说兼容，是的，我是这样做的：，我无法为支架设置固定高度。这就是为什么身体内容重叠的原因，由于内部容器（即包装器）未使用，因此在结尾处它是完全浮动的，因为内部使用了绝对定位。@mayenulislam-很难理解您的意思，因为您指的是您没有在其他地方发布的代码。@mayenulislam-您需要将我的答案中的代码应用到您的代码中，它会工作的-您尝试过吗？

<div id="inner-container">
    <div id="content">
       CONTENT
    </div>
    <aside id="left-sidebar">
       LEFT SIDEBAR
    </aside>
    <aside id="right-sidebar">
       RIGHT SIDEBAR
    </aside>
    <div class="clearfix"></div>
</div> <!-- #inner-container -->

#content{
  margin-left: 2.5%;
  float: left;
  position: relative;
  width: 48.0%;
}

#left-sidebar,
#right-sidebar{
  position: relative;
  width: 23.4%;
}

#left-sidebar{
  float: left;
}

#right-sidebar{
  float: right;
}

(1) +-------++----------------++-------+ | || || | | || || | | LEFT || CONTENT || RIGHT | | || || | | || || | +-------++----------------++-------+ (2) +------+ | CONT | | | +------+ | LFT | +------+ | RHT | +------+

<div id='wrapper'>
    <div id='content'>Content</div>
    <div id='left'>Left</div>
    <div id='right'>Right</div>
</div>

html, body {
    margin:0;
    padding:0;
}
#left, #right, #content {
    height:300px;
    position:absolute;
}
#left {
    background:yellow;
    width:23.4%;
}
#content {
    background:red;
    width:48.0%;
    left:23.4%;
}
#right {
    background:blue;
    left:71.4%;
    width:23.4%;
}
@media (max-width: 700px) {
    #left, #right, #content {
        display:block;
        position:relative;
        left:auto;
        width:100%;
    }
}