CSS 兩列響應式布局是一種經典的網頁設計方式，能夠為網頁帶來更好的用戶體驗和視覺效果。這種布局的實現方法有很多種，我們下面介紹一種基于 Flexbox 的方法。 首先我們需要給整個頁面添加一個包裹容器，設置寬度為 100% ，height為auto，讓頁面元素能夠在容器內自適應布局。然后使用 Flexbox 的 display:flex 和 flex-wrap:wrap 屬性，創建兩個子容器來實現兩列布局。代碼如下：

<div class="wrapper">
<div class="left"></div>
<div class="right"></div>
</div>
.wrapper {
width: 100%;
height:auto;
display: flex;
flex-wrap: wrap;
}
.left {
width: 60%;
height: 100vh;
}
.right {
width: 40%;
height: 100vh;
}

在上面的代碼中，我們設置了左邊容器的寬度為 60%，右邊容器的寬度為 40%，高度為 100 瀏覽器可視視窗高度，這樣可以讓容器在不同屏幕尺寸下展現不同的布局。 接下來，我們需要實現響應式布局。我們可以使用媒體查詢（@media）的方法，針對不同的屏幕寬度，設定不同的樣式，使得網頁在不同屏幕下都可以自適應展現。代碼如下：

@media (max-width: 960px) {
.left {
width: 100%;
}
.right {
width: 100%;
}
}
@media (max-width: 768px) {
.left {
width: 100%;
}
.right {
width: 100%;
}
}
@media (max-width: 480px) {
.left {
width: 100%;
}
.right {
width: 100%;
}
}

在上面的代碼中，我們使用了 @media 查詢語句，并設置了三個不同的媒體查詢分別對應三個不同的屏幕寬度。當屏幕寬度小于等于 960px 時，左右容器寬度均設置為 100% ；當屏幕寬度小于等于 768px 時，左右容器寬度均設置為 100%；當屏幕寬度小于等于 480px 時，左右容器寬度均設置為 100% 。 綜上所述，使用 Flexbox 和 @media 查詢的方式能夠快速實現響應式雙列布局，操作簡便，代碼清晰易懂。