CSS是一種網頁樣式語言，能夠為網頁賦予豐富的視覺效果。其中，根據寬度改變布局是CSS的一個常見應用。

@media screen and (max-width: 768px) {
/* 當屏幕寬度小于等于768px時 */
.box {
display: flex;
flex-direction: column;
}
}
@media screen and (min-width: 769px) {
/* 當屏幕寬度大于等于769px時 */
.box {
display: flex;
flex-direction: row;
justify-content: space-between;
}
}

在上面的代碼中，我們使用了媒體查詢@media來設置不同寬度下的布局。當屏幕寬度小于等于768px時，我們將.box容器設置為flex縱向布局，讓其中的內容依次排列。當屏幕寬度大于等于769px時，我們將.box容器設置為flex橫向布局，使用justify-content屬性將其中的子元素與容器邊緣間隔相等。通過這樣的方式，我們可以讓布局在不同屏幕尺寸下自適應地展示。

可以看到，CSS根據寬度改變布局可以為我們提供更加靈活的網頁排版方案。當我們希望網頁在不同設備上呈現的效果一致時，這種方法尤其有用。