I have implemented a custom 12-column grid and have created a row structure as follows:
<div class="row">
<div id="the-pink" class="lg-6 md-12 sm-12"><!-- content --></div>
<div id="the-violet" class="lg-6 md-12 sm-12"><!-- content --></div>
</div>
https://i.sstatic.net/uKWs0.png
My goal is to achieve the following behavior: On medium and small devices, both blocks should occupy 12 columns width each, but I want the block with ID #the-violet to appear above #the-pink by default.
https://i.sstatic.net/GqRrZ.png
The simplified SCSS code I am currently using is:
.row {
@include clearfix;
[class*="lg-"],
[class*="md-"],
[class*="sm-"] {
float: left;
}
}
.lg-6 {
width: 50%;
}
.md-12 {
@include respond-to("medium") {
width: 100%;
}
}
.sm-12 {
@include respond-to("small") {
width: 100%;
}
}
I am assuming that the mixins clearfix and respond-to are widely known.
I attempted a solution by giving my row a class called reversed with fixed height (see Fiddle):
.reversed {
position: relative;
@include respond-to("small" "medium") {
.sm-12,
.md-12 {
position: absolute;
top: 0;
&::first-child {
top: 200px;
}
}
}
}
However, I am seeking alternative approaches that do not require fixing the height. If anyone has encountered this issue before and has a cleaner solution, I would appreciate any insights.