This is both a feature-request for future version of BSS and a bug from the current version. Media Queries ordering in a CSS file matter and this is so annoying to me. Let me show you with an example:
// This is MD screens and above
@media (min-width 576px)
.my_style {
width: 200px;
}
// This is LG screens and above
@media (min-width 992px)
.my_style {
width: 300px;
}
// This is for XS screens (by default since Bootstrap uses a mobile-first approach)
.my_style {
width: 100px;
}
The code above won't work correctly since LG media query should go above MD query. We either need a way to manually sort the styles (drag & drop or some kind of arrows inside the style editor) or let BSS to sort them automatically based on the media queries scheme.
Thanks in advance!