Group Media Queries

Any chance of having multiple classes attached to a single media query. I think it is legitimate CSS.

@media (max-width: 992px) {
  .services div {
    width: 100%;
  }
}

@media (max-width: 992px) {
  .services .odd {
    order: 1;
  }
}

as

@media (max-width: 992px) {
  .services div {
    width: 100%;
  }
  .services .odd {
    order: 1;
  }
}

This way we can control multiple classes with one media query.

Devs, I understand that it’s much easier to come up with ideas than to implement them.

Personally, I prefer to use BSS SCSS files.
I find this easier to use with nesting selectors and using variables.
Copy and paste CSS code becomes very simple.
BSS is magic, nothing to configure to use SASS.

Some time back we investigated supporting multiple blocks per media query in our CSS editor, but decided the UX would be too cumbersome. Having each block in a separate media query is easier to edit and reorder with drag and drop, and reason about.

As @JCWEB mentioned, writing SCSS instead of CSS in Bootstrap Studio is one way to work around this. The other is to rely on our Minify export option. It combines multiple media query blocks in one when bundling CSS.