Change column order of layout for mobile and desktop - html

Question

The image below shows my currently layout where the height of container 1 and 3 is determined by the middle column. In my mobile view, I want the containers to stack on top of each other, that is, 1,2,3,4. However with my current approach, I have 1,2,4,3
<div class="wrapper">
<div class="aside aside-1">
<h2>container 1</h2>
</div>
<div class="main">
<div class="inner-content first">
<h2>container 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id fermentum erat, cursus viverra risus. Cras sodales risus justo, in pretium eros pretium ut.</p>
</div>
<div class="inner-content last">
<h2>container 4</h2>
</div>
</div>
<div class="aside aside-2">
<h2>container 3</h2>
</div>
</div>
.wrapper {
display: flex;
flex-flow: row wrap;
}
.wrapper > * {
flex: 1 100%;
margin: 20px 0;
}
.main {
margin-right: 20px;
margin-left: 20px;
.inner-content {
background: yellow;
padding: 10px;
&.first {
margin-bottom: 20px;
}
}
}
.aside-1, .aside-2 {
background: yellow;
padding: 10px;
}
#media all and (min-width: 600px) {
.aside { flex: 1 0 0; }
}
#media all and (min-width: 800px) {
.main { flex: 1 0px; }
.aside-1 { order: 1; }
.main { order: 2; }
.aside-2 { order: 3; }
.footer { order: 4; }
}
Here is a link to demonstrate issue

Answer 1

display: contents;
With your actual markup, one of the soution would be to use display: contents; on .main div.
These elements don't produce a specific box by themselves. They are replaced by their pseudo-box and their child boxes. Please note that the CSS Display Level 3 spec defines how the contents value should affect "unusual elements" — elements that aren’t rendered purely by CSS box concepts such as replaced elements.
Source: MDN.
Two caveats:
It might remove the content from the accessibility tree
It's not supported by IE
Snippet as follows :
.wrapper {
display: flex;
flex-flow: row wrap;
}
.wrapper > * {
flex: 1 100%;
margin: 20px 0;
}
.main {
margin-right: 20px;
margin-left: 20px;
display: contents;
.inner-content {
background: yellow;
padding: 10px;
&.first {
margin-bottom: 20px;
}
}
}
.aside-1,
.aside-2 {
background: yellow;
padding: 10px;
}
.last {
order: 2;
}
.aside-2, .last {
width: 100%;
margin: 20px 0;
}
#media all and (min-width: 600px) {
.aside {
flex: 1 0 0;
}
}
#media all and (min-width: 800px) {
.main {
flex: 1 0px;
display: block;
}
.aside-1 {
order: 1;
}
.main {
order: 2;
}
.aside-2 {
order: 3;
}
.last {
width: auto;
}
}
<div class="wrapper">
<div class="aside aside-1">
<h2>container 1</h2>
</div>
<div class="main">
<div class="inner-content first">
<h2>container 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id fermentum erat, cursus viverra risus. Cras sodales risus justo, in pretium eros pretium ut.</p>
</div>
<div class="inner-content last">
<h2>container 4</h2>
</div>
</div>
<div class="aside aside-2">
<h2>container 3</h2>
</div>
</div>
Support:
Table of support on Can I Use
css grid
By changing your actual markup and using grid, you could have an easier solution.
There is many ways to do it and I would adjust the HTML markup depending on the importance of the content for the page.
A solution would be to have a wrapper with for children as follows : Content 1, Content 2, Content 3, Content 4.
On mobile, you can keep the initial box model display: block; and make the adjustement only in your media queries.
Snippet as follows :
.wrapper > div {
background: yellow;
padding: 10px;
margin-bottom: 20px;
}
#media all and (min-width: 800px) {
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto;
gap: 20px 20px;
grid-template-areas:
"aside-1 first aside-2"
"aside-1 last aside-2";
}
.aside-2 { grid-area: aside-2; }
.aside-1 { grid-area: aside-1; }
.first { grid-area: first; }
.last { grid-area: last; }
.wrapper > div {
margin-bottom: 0;
}
}
<div class="wrapper">
<div class="aside-1">
<h2>container 1</h2>
</div>
<div class="first">
<h2>container 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id fermentum erat, cursus viverra risus. Cras sodales risus justo, in pretium eros pretium ut.</p>
</div>
<div class="aside-2">
<h2>container 3</h2>
</div>
<div class="last">
<h2>container 4</h2>
</div>
</div>
The markup and the styles are simpler than your initial code: less div and less rules.
Table of support on Can I Use
Don't forget to prefix your rules whe you use grid.