CSS移動端布局是前端開發中非常重要的一部分。今天，我們將演示一種簡單但強大的移動端布局DEMO，并附上代碼說明。

首先，我們需要在HTML的頭部引入viewport meta標簽，這樣瀏覽器就會為我們正確設置視口大小的初始縮放。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

接下來，我們將創建一個包含兩個列的布局，其中左列是導航欄，右列是內容區域。

<div class="container">
<div class="sidebar">
// 導航欄內容
</div>
<div class="content">
// 內容區域內容
</div>
</div>

我們需要在CSS中使用flexbox來實現這個布局，同時需要通過媒體查詢來監測屏幕大小并根據需要調整布局。以下是實現這一點的代碼：

@media only screen and (max-width: 768px) {
.container {
display: flex;
flex-direction: column;
}
.sidebar {
order: 2;
}
.content {
order: 1;
}
}
@media only screen and (min-width: 769px) {
.container {
display: flex;
}
.sidebar {
flex: 30%;
}
.content {
flex: 70%;
}
}

上述代碼中的媒體查詢會在屏幕寬度小于等于768像素時應用CSS樣式，而在大于768像素時應用其他CSS樣式。這意味著在移動屏幕上，導航欄和內容區域將以豎直方向排列，而在平板或桌面屏幕上，導航欄和內容區域以水平方向排列。

最后，我們需要在CSS中對導航欄和內容區域進行樣式設置，使其看起來像我們想要的。

.sidebar {
background-color: #f2f2f2;
padding: 10px;
}
.content {
background-color: #fff;
padding: 10px;
}

現在，我們已經完成了這個簡單但強大的移動端布局DEMO！

綜上所述，CSS移動端布局是前端開發中必不可少的一部分。通過實現我們的DEMO和代碼說明，我們希望您能夠更好地了解和應用CSS移動端布局。