Sorting Media Queries automatically

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!

Please see my answer to your other post in the Ideas forum. There isn't a bug, just to alleviate that frustration. :)