Is it possible to reorder three columns from left to right into a stacked layout when the screen size is reduced using a media query? The desired outcome is to have the middle column on top, followed by the left column underneath, and then the right column. I'm struggling with this and would appreciate any guidance or assistance. Below is the HTML and CSS code, as well as a link to the CodePen example: https://codepen.io/Macast/pen/jZworE.
This is the layout I aim to achieve: https://i.sstatic.net/8Vjw0.jpg
HTML:
<body>
<div class="columnContainer">
<div class="leftColumn" style="background-color:#aaa;">
<h2>Left Column</h2>
</div>
<div class="middleColumn" style="background-color:#bbb;">
<h2>Middle Column</h2>
</div>
<div class="rightColumn" style="background-color:#ccc;">
<h2>Right Column</h2>
</div>
</div>
</body>
</html>
CSS:
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.columnContainer {
width: 100%;
}
.leftColumn {
float: left;
width: 33.33%;
padding: 10px;
height: 200px;
text-align: center;
}
.middleColumn {
float: left;
width: 33.33%;
padding: 10px;
height: 200px;
text-align: center;
}
.rightColumn {
float: left;
width: 33.33%;
padding: 10px;
height: 200px;
text-align: center;
}
.columnContainer:after {
content: "";
display: table;
clear: both;
}
/* Media Query */
@media (min-width: 320px) and (max-width: 480px) {
/* Column Stacking Here */
}