Responsive Breakpoints

// Responsive breakponts 
// ---------------------

// Fallback / v-small
.class{
    color:orange; 
}

// mobile
@media (min-width: 576px) {
    .class{
      color:white; 
    }
}

// large mobile
@media (min-width: 768px) {
    .class{
      color:red; 
    }
}

// tablet
@media (min-width: 992px) {
    .class{
      color:blue; 
    }
}
// Large
@media (min-width: 1200px) {
    .class{
      color:yellow; 
    }
}

// Short version
// -------------

//fallback first
{}

@media (min-width: 576px) {
}

@media (min-width: 768px) {
}

@media (min-width: 992px) {
}

@media (min-width: 1200px) {
}