Conditional rendering based on breakpoints

Questions
1

Hi,

Are there classes for conditional rendering based on breakpoints similar to what is available for theme based renderings: Theme Based Rendering | Framework7 Documentation

2

For now I just rolled my own:

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {

.if-at-least-xs,
.if-at-least-sm,
.if-at-least-md,
.if-at-least-lg,
.if-at-least-xl {
    visibility: visible;
}

.if-at-most-xs,
.if-at-most-sm,
.if-at-most-md,
.if-at-most-lg,
.if-at-most-xl {
    visibility: visible;
}

}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {

.if-at-least-xs {
    visibility: hidden;
}

.if-at-least-sm,
.if-at-least-md,
.if-at-least-lg,
.if-at-least-xl {
    visibility: visible;
}

.if-at-most-xs {
    visibility: hidden;
}

.if-at-most-sm,
.if-at-most-md,
.if-at-most-lg,
.if-at-most-xl {
    visibility: visible;
}

}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {

.if-at-least-xs,
.if-at-least-sm {
    visibility: hidden;
}

.if-at-least-md,
.if-at-least-lg,
.if-at-least-xl {
    visibility: visible;
}

.if-at-most-xs,
.if-at-most-sm {
    visibility: hidden;
}

.if-at-most-md,
.if-at-most-lg,
.if-at-most-xl {
    visibility: visible;
}

}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

.if-at-least-xs,
.if-at-least-sm,
.if-at-least-md {
    visibility: hidden;
}

.if-at-least-lg,
.if-at-least-xl {
    visibility: visible;
}

.if-at-most-xs,
.if-at-most-sm,
.if-at-most-md {
    visibility: hidden;
}

.if-at-most-lg,
.if-at-most-xl {
    visibility: visible;
}

}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {

.if-at-least-xs,
.if-at-least-sm,
.if-at-least-md,
.if-at-least-lg {
    visibility: hidden;
}

.if-at-least-xl {
    visibility: visible;
}

.if-at-most-xs,
.if-at-most-sm,
.if-at-most-md,
.if-at-most-lg {
    visibility: hidden;
}

.if-at-most-xl {
    visibility: visible;
}

}