隨著移動設備的普及，越來越多的網站需要適配不同尺寸的屏幕，而側邊欄是常見的網站布局之一。如何使用CSS實現移動設備上的側邊欄呢？

/* HTML結構 */
<div class="wrapper">
<div class="content">網站內容</div>
<div class="sidebar">側邊欄</div>
</div>
/* CSS樣式 */
@media (max-width: 768px) {
.wrapper {
display: flex;
flex-direction: column-reverse;
}
.content {
flex-grow: 1;
}
.sidebar {
flex-shrink: 0;
width: 100%;
transform: translateY(100%);
transition: transform 0.3s ease-out;
position: fixed;
bottom: 0;
left: 0;
background-color: #fff;
padding: 20px;
}
.sidebar.open {
transform: translateY(0);
}
}
@media (min-width: 768px) {
.wrapper {
display: flex;
}
.content {
flex-grow: 1;
}
.sidebar {
flex-shrink: 0;
width: 200px;
background-color: #fff;
padding: 20px;
}
}

代碼解釋：

首先，我們使用@media查詢來使用不同的樣式規則適配不同的屏幕尺寸。在屏幕寬度小于等于768px時，我們將wrapper元素設置為flex布局，并將內容區域content與側邊欄sidebar的排列順序倒過來。這里使用了flex-direction屬性和column-reverse值。同時，我們設置側邊欄的高度為100%，并使用transform: translateY(100%)將其向下平移一個側邊欄的高度，這樣側邊欄就不會顯示出來了。

在側邊欄需要顯示時，我們可以通過增加一個.open類來觸發動畫效果顯示側邊欄。這里使用了CSS3的transition屬性和transform屬性，將側邊欄從底部平移上來。

在屏幕寬度大于768px時，我們將wrapper元素的flex-direction屬性設置為默認的row，同時將側邊欄的寬度設置為200px。

以上就是使用CSS實現移動端側邊欄的代碼。通過使用flex布局和CSS3動畫，我們可以輕松實現一個優雅的移動端側邊欄。