Check out this demonstration to understand how the height of the outer wrapper affects the layout. In this scenario, the height of the wrapper is set to the viewport height:
body {
margin: 0;
}
* {
box-sizing: border-box;
}
.wrapper {
display: flex;
flex-wrap: wrap;
height: 100vh;
}
.wrapper > div {
border: 1px solid;
width: 50%;
height: 50%;
}
.wrapper > div:first-child {
height: 100%;
}
.wrapper > div:last-child {
margin-left: auto;
position: relative;
top: -50%;
}
@media only screen and (max-width: 650px) {
.wrapper {
display: flex;
flex-direction: column;
flex-wrap: initial;
}
.wrapper > div {
width: 100%;
}
.wrapper > div:first-child {
order: 2;
}
.wrapper > div:last-child {
order: 3;
top: 0;
}
}
<div class="wrapper">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
Here is an example when you wrap B and C in a container. Note that in mobile view, you can only achieve A-B-C, not B-A-C. See the snippet below:
body {
margin: 0;
}
* {
box-sizing: border-box;
}
.wrapper {
display: flex;
}
.wrapper > div:first-child {
width: 50%;
border: 1px solid;
}
.wrapper > .inner-wrap {
display: flex;
flex-direction: column;
width: 50%;
}
.wrapper > .inner-wrap > div {
width: 100%;
border: 1px solid;
}
@media only screen and (max-width: 650px) {
.wrapper {
display: flex;
flex-direction: column;
}
.wrapper > div:first-child {
width: 100%;
}
.wrapper > .inner-wrap {
width: 100%;
}
}
<div class="wrapper">
<div class="content">
<p>A</p>
Lorem ipsum...
</div>
<div class="inner-wrap">
<div class="content">
<p>B</p>
Lorem ipsum...
</div>
<div class="content">
<p>C</p>
Lorem ipsum...
</div>
</div>
</div>
Summary:
If you're unsure about the height of the flexbox, achieving the intended order in both mobile and PC layouts might be challenging.
2022 Update
Utilizing CSS grids offers a solution - a two-column layout to organize the grid items. By defining grid-row (or grid-column), you can switch the order of items. Check out the example below:
body {
margin: 0;
}
.wrapper {
display: grid; /* grid container */
grid-template-columns: 1fr 1fr; /* 2 column layout */
grid-template-rows: auto 1fr; /* 2 rows */
height: 100vh;
}
.wrapper > div {
border: 1px solid;
/* flexbox for centering */
display: flex;
justify-content: center;
align-items: center;
}
.wrapper > div:first-child {
grid-row: span 2; /* span two rows */
}
@media only screen and (max-width: 800px) {
.wrapper {
grid-template-columns: 1fr; /* one column */
grid-template-rows: auto; /* reset row definiton */
}
.wrapper > div:first-child {
grid-row: 2; /* place in second row */
}
}
/* styles for presentation */
.wrapper div:first-child {
background: #67c36e;
font-size: 5em;
}
.wrapper div:nth-child(2) {
background: #ec897c;
font-size: 2em;
}
.wrapper div:last-child {
background: #7cd0ec;
font-size: 5em;
}
<div class="wrapper">
<div>A</div>
<div>B</div>
<div>C</div>
</div>