在網頁設計中，布局是非常重要的一部分。隨著移動設備的普及，響應式設計已經成為了不可或缺的一部分。在這種情況下，CSS三列和兩列自由切換變得更加重要。

首先，我們來看看CSS三列布局。這種布局方式適用于大屏幕，通常是在內容中間放置一個寬度較大的主要內容區域，兩邊放置兩個相對較窄的輔助區域。下面是一個示例代碼：

.container {
display: flex;
}
.main {
flex: 1;
}
.sidebar {
flex-basis: 200px;
}

上面的代碼將一個容器（container）設置為 flex 布局，容器內包含了一個主要內容區域（main）和一個側邊欄（sidebar）。在這個布局中，主要內容區域會自動填充剩余的空間，而側邊欄則會保留固定的寬度。

接下來，我們看看CSS兩列自由切換布局。這種布局方式適用于小屏幕，通常是在內容區域和側邊欄之間添加一個切換按鈕。下面是一個示例代碼：

.container {
display: flex;
flex-wrap: wrap;
}
.content {
flex-basis: 100%;
}
.sidebar {
flex-basis: 33.33%;
}
.toggle {
display: none;
}
@media screen and (max-width: 768px) {
.sidebar {
display: none;
}
.toggle {
display: block;
}
.content {
flex-basis: 100%;
}
}

上面的代碼將一個容器（container）設置為 flex 布局，并添加了一個在小屏幕下隱藏的切換按鈕（toggle）。在大屏幕下，容器內包含了一個內容區域（content）和一個側邊欄（sidebar）。在小屏幕下，側邊欄會被隱藏，切換按鈕會顯示，內容區域則會占據整個寬度。

綜上所述，CSS三列和兩列自由切換布局都是非常實用的布局方式。在實現響應式設計時，我們應該選擇最適合我們頁面需求的布局方式。