好像您快到了。仅需两个步骤：
定义伸缩容器的高度
如果没有定义高度，某些浏览器可能不知道在哪里包装。尝试这个：
.container { display: flex; flex-direction: column; flex-wrap: wrap; height: 500px; }关闭移动视图上的环绕
@media (max-width: 500px) { .container { flex-wrap: nowrap; } .cell { width: 100%; } .cell-1 { order: 2; } .cell-2 { order: 1; } .cell-3 { order: 3; }}.container { display: flex; flex-direction: column; flex-wrap: wrap; height: 500px;}.cell { background: #ccc; border: solid 3px black; width: 50%;}.cell-1 { flex-basis: 100%;}@media (max-width: 500px) { .container { flex-wrap: nowrap; } .cell { width: 100%; } .cell-1 { order: 2; } .cell-2 { order: 1; } .cell-3 { order: 3; }}<h1>Vertical Boxes</h1><p>Goal: Have one box on the left, and two boxes on the right that are stacked. All without nesting, so that the order of the boxes can be changed on smaller screen sizes.</p><div > <div > <h2>One</h2> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure. </div> <div > <h2>Two</h2> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste mollitia temporibus id sint illum doloremque pariatur nulla vel soluta, nostrum vitae, suscipit ea natus sed eaque in velit deserunt deleniti! </div> <div > <h2>Three</h2> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, architecto perferendis voluptatum accusantium est ipsam fugit, laudantium fugiat nostrum consectetur earum. Asperiores, similique deleniti nobis nemo error, iste iure architecto. </div></div>
