Flex positioning of sidebar when in particular order - html

Question

I have a simple 2-column layout with 3 sections. Depending on a media query, I want to change the order of them - for this I am using flex order.
This works fine, except I get my narrow sidebar section starting at the end of the first section, or similar to this. Is there a way I can get them to position more like jigsaw pieces?
Fiddle example of issue:
https://jsfiddle.net/an7m3yvs/
HTML:
<div class="page-wrapper">
<div class="container">
<div class="box1">
BOX 1
</div>
<div class="box2">
BOX 2
</div>
<div class="box3">
BOX 3 Sidebar
</div>
</div>
</div>
CSS:
.page-wrapper{
width:100%;
max-width:500px;
margin:0 auto;
}
.container{
display:flex;
flex-wrap:wrap;
}
.box1{
display:inline-block;
background:red;
width:70%;
height:400px;
order:1;
}
.box2{
display:inline-block;
background:green;
width:70%;
height:150px;
order:2;
}
.box3{
display:inline-block;
background:grey;
width:30%;
height:600px;
order:3;
}
How I want it:
(I know this can be done simpler but the idea is so I can change the order with a media query, as in mobile I want a single column and them in a different order.)
GRID ATTEMPT: https://jsfiddle.net/w489b2fj/

Answer 1

The 3rd element is not positioned according to the first element but to its predecessor. The sidebar will occupy the remaining space after the 2nd element and not the 1st.
To achieve the desired result, I think it is better to manage 2 flexbox containers. The first includes box1 and box2. The second includes box container and the sidebar.
Edit HTML:
<div class="page-wrapper">
<div class="container">
<div class="content-wrapper">
<div class="box1">
BOX 1
</div>
<div class="box2">
BOX 2
</div>
</div>
<div class="box3">
BOX 3 Sidebar
</div>
</div>
</div>
And edit the CSS:
.container, .content-wrapper{
display:flex;
flex-wrap:wrap;
}
.content-wrapper {
width: 70%;
}
.box1, .box2 {
width: 100%;
}
EDIT:
Ok, with this new information I have another solution:
.container {
position: relative;
}
.box3 {
position: absolute;
top: 0;
right: 0;
}

Answer 2

You can achieve that by adding flex-direction: column; to the container. But in this case (in order to wrap the items) you also need to set a fixed height, in your case height: 550px;.
And actually, you don't need the order settings for the flex items in this simple case...
.page-wrapper {
width: 100%;
max-width: 500px;
margin: 0 auto;
}
.container {
display: flex;
flex-wrap: wrap;
flex-direction: column;
height: 550px;
}
.box1 {
display: inline-block;
background: red;
width: 70%;
height: 400px;
order: 1;
}
.box2 {
display: inline-block;
background: green;
width: 70%;
height: 150px;
order: 2;
}
.box3 {
display: inline-block;
background: grey;
width: 30%;
height: 600px;
order: 3;
}
<div class="page-wrapper">
<div class="container">
<div class="box1">
BOX 1
</div>
<div class="box2">
BOX 2
</div>
<div class="box3">
BOX 3 Sidebar
</div>
</div>
</div>

Answer 3

You wanted an answer using CSS Grid, where box3 places inbetween box1 and box2 in mobile viewports. Here you are:
.container{
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas:
"box1"
"box3"
"box2"
}
#media (min-width:768px){
.container{
display:grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-template-areas:
"box1 box3"
"box2 box3"
}
}
.box1{
grid-area: box1;
background-color: #f00;
}
.box2{
grid-area: box2;
background-color: #0f0;
}
.box3{
grid-area: box3;
background-color: #00f;
}
<div class="page-wrapper">
<div class="container">
<div class="box1">
BOX 1
</div>
<div class="box2">
BOX 2
</div>
<div class="box3">
BOX 3 Sidebar
</div>
</div>
</div>

Answer 4

Try using position property and place the boxes relative to page wrapper.

Answer 5

if you can change HTML ( and always make good structure ) try this:
do the flex on c1 and c2 elements and you simply remove all inline-block instructions
<div class="page-wrapper">
<div class="container">
<div class=c1>
<div class="box1">
BOX 1
</div>
<div class="box2">
BOX 2
</div>
</div>
<div class=c2>
<div class="box3">
BOX 3 Sidebar
</div>
</div>
</div>
And css:
.page-wrapper{
width:100%;
max-width:500px;
margin:0 auto;
}
.container{
display:flex;
}
.box1{
background:red;
height:200px;
order:2;
}
.box2{
background:green;
height:150px;
order:1;
}
.box3{
background:grey;
width:100%;
height:400px;
}
.c2{
width:30%;
flex-basis:1;
}
.c1{
display:flex;
flex-direction:column;
width:70%;
flex-basis:1;
}