Change order of containers in mobile - css

Question

I am using w3.css, want to change order of containers when on mobile ( check screenshot below). Is there any class in w3.css which help changing order of blocks? I don't want to use standard css flex, just wanted to use w3.css

Answer 1

Since you have the flexbox tag I'm giving you the Flexbox solution:
body {
color: #fff;
}
.parent {
display: flex; /* displays the children inline */
}
.child {
flex: 1; /* children take as much horizontal space as they can */
height: 100px;
}
.A {
background: blue;
}
.B {
background: red;
}
#media screen and (max-width: 568px) { /* adjust to your needs */
.parent {
flex-direction: column; /* stacks the children vertically */
}
.A {
order: 2; /* changes the order, i.e. displays the .A below the .B */
}
}
<div class="parent">
<div class="child A">A</div>
<div class="child B">B</div>
</div>
You can also do it with the Grid:
body {
color: #fff;
}
.parent {
display: grid;
grid-template-columns: repeat(2, 1fr); /* could also use: 1fr 1fr or 50% 50% without the repeat() */
grid-template-rows: repeat(2, minmax(100px, auto)); /* minimum height 100px, maximum height unlimited, adjust to your needs, you can also remove it, not mandatory */
}
.A {
background: blue;
}
.B {
background: red;
}
#media screen and (max-width: 568px) {
.parent {
grid-template-columns: 1fr; /* could also use: 100% */
}
.A {
order: 2;
}
}
<div class="parent">
<div class="A">A</div>
<div class="B">B</div>
</div>