Reorder design system rules to enable more flexible overwriting

CSS rules of the same specificity (most of our helpers only use a single class, so have the specificity 0,1,0) are applied in the order they are loaded/defined.
This means that we should place more specific helpers below more board components to increase the flexibility.
Doing so reduces the need for !important markings on rules, which can get quite out of hand.

Examples of what the proposed changes allow to do:

1) `sci-button-primary sci-p-1` - allows to reduce the default padding of our button class

2) `sci-d-flex sci-d-none` - Allows to hide an element and show it as soon as the `sci-d-none` is removed (the JS code does not need to know what proper display class has to be added)

Fixes: OX-11120

src/main/resources/assets/design-system/design-system.scss

@@ -6,14 +6,14 @@ $gap: 1rem;
 
 @import "/assets/tycho/styles/sirius-colors";
 @import "/assets/design-system/grid";
-@import "/assets/design-system/display";
-@import "/assets/design-system/text";
-@import "/assets/design-system/margin-padding";
 @import "/assets/design-system/flex";
 @import "/assets/design-system/card";
 @import "/assets/design-system/table";
 @import "/assets/design-system/icons";
-@import "/assets/design-system/misc";
 @import "/assets/design-system/button";
 @import "/assets/design-system/form";
 @import "/assets/design-system/message";
+@import "/assets/design-system/misc";
+@import "/assets/design-system/text";
+@import "/assets/design-system/display";
+@import "/assets/design-system/margin-padding";

src/main/resources/assets/design-system/display.scss

@@ -1,7 +1,3 @@
-.sci-d-none {
-  display: none !important;
-}
-
 .sci-d-flex {
   display: flex !important;
 }
@@ -23,11 +19,11 @@
   display: grid !important;
 }
 
-@media (min-width: $sm-min-width) {
-  .sci-d-sm-none {
-    display: none !important;
-  }
+.sci-d-none {
+  display: none !important;
+}
 
+@media (min-width: $sm-min-width) {
   .sci-d-sm-flex {
     display: flex !important;
   }
@@ -43,13 +39,13 @@
   .sci-d-sm-block {
     display: block !important;
   }
-}
 
-@media (min-width: $md-min-width) {
-  .sci-d-md-none {
+  .sci-d-sm-none {
     display: none !important;
   }
+}
 
+@media (min-width: $md-min-width) {
   .sci-d-md-flex {
     display: flex !important;
   }
@@ -65,13 +61,13 @@
   .sci-d-md-block {
     display: block !important;
   }
-}
 
-@media (min-width: $lg-min-width) {
-  .sci-d-lg-none {
+  .sci-d-md-none {
     display: none !important;
   }
+}
 
+@media (min-width: $lg-min-width) {
   .sci-d-lg-flex {
     display: flex !important;
   }
@@ -87,4 +83,8 @@
   .sci-d-lg-block {
     display: block !important;
   }
+
+  .sci-d-lg-none {
+    display: none !important;
+  }
 }