It looks like you were almost there. Just two more steps:
- Define a height for the flex container
Without a defined height some browsers may not know where to wrap. Try this:
.container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 500px; /* new; value just for demo purposes */
}
- Turn off wrap on mobile view
@media (max-width: 500px) {
.container { flex-wrap: nowrap; } /* new */
.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 class="container">
<div class="cell cell-1">
<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 class="cell cell-2">
<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 class="cell cell-3">
<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>