我在一個響應式網站上工作，遇到一個有趣的問題。我有一些并排的div?？赡苡?到6個左右的任何地方。當屏幕的寬度不足以正確顯示所有內容時，div將垂直堆疊。使用CSS足夠簡單。問題是，我需要根據布局以不同的順序排列它們。使用2或3個div（根據width更改div的順序）很容易做到這一點，但是當您添加第四個div時，難度就更大。我可以使用position: absolute;并手動設置位置，但是這會使父級縮小并且不能正確包含它們。更復雜的是，我不能使用JavaScript。使用兩列：（未試）HTML：<div id="container">    <div class="column-half column-half-2">        First div on mobile, right div on desktop    </div>    <div class="column-half column-half-1">        Second div on mobile, left div on desktop    </div></div>CSS：.container {    width: 80%;    max-width: 1200px;    margin: 0 auto;    padding-bottom: 20px;    position: relative;}.column-half {    display: table-cell;    padding: 25px;    vertical-align: top;    width: 40%;}.column-half-1 {    float: left;}.column-half-2 {    float: right;}HTML，有4列：<div id="container">    <div class="column-quarter column-quarter-3">        First div on mobile, third div on desktop    </div>    <div class="column-quarter column-quarter-2">        Second div on mobile, second div on desktop    </div>    <div class="column-quarter column-quarter-1">        Third div on mobile, first div on desktop    </div>    <div class="column-quarter column-quarter-4">        Fourth div on mobile, fourth div on desktop    </div></div>