Change stack order between different flexbox rows
Goodmorning. I'm trying to change the stacking order in a flexbox situation where there are 2 columns, but the first column contains a spot where the second column needs to be put. So when on mobile I need to order them differently than the original order.
It's on big
col 1 col 2
----------==============
[A] [C]
[B]
Where A and B are in one column and C is in another
But with a small breakpoint, it should be
[A] [C] [B]
Is this possible using Flexbox only?
So to clarify. The HTML structure is as follows:
row
column
divA
divB
column
divC
.a { background-color: green; }
.b { background-color: red; }
.c { background-color: blue; }
.row {
display: flex;
flex-direction: column;
}
.column {
flex: 1;
}
@media (min-width: 768px) {
.row {
flex-direction: row;
}
}
<div class="row">
<div class="column">
<div class="a">A</div>
<div class="b">B</div>
</div>
<div class="column c">C</div>
</div>
+3
source to share
1 answer
You can achieve what you want with media queries and ordering:
.a {
background-color: green;
order: 1;
}
.b {
background-color: red;
order: 3;
}
.c {
background-color: blue;
order: 2;
}
.row {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap; /* add this so you don't need the extra wrapper div */
}
.row>div {
width: 50%; /* start off width children being 50% width */
}
@media (max-width: 768px) {
.row>div {
/* for small screens */
width: 100%;
}
}
<div class="row">
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
</div>
+4
source to share