Show Grid!

show-grid.scss

/*!
Show Grid - Hides stuff depending on your window's width.
DevEarley - 2019
 */
 
 $xs: 0;
 $sm: 576px;
 $md: 768px;
 $lg: 992px;
 $xl: 1200px;

@-ms-viewport {
 width: device-width; }
/*

What to show...
       ______ _______ __________ _____________ ________________
width |  xs  |  sm   |  md      |  lg         |  xl            | 
      |______|_______|__________|_____________|________________|
show  |  xs  | xs,sm | xs,sm,md | xs,xm,md,lg | xs,sm,md,lg,xl |
      |______|_______|__________|_____________|________________|
*/

 @media (max-width: $sm) {
    .hide-col-when-xs{
        display:none!important;
    }
    .hide-col-when-sm{
        display:initial;
    }
    .hide-col-when-md{
        display:initial;
    }
    .hide-col-when-lg{
        display:initial;
    }
    .hide-col-when-xl{
        display:initial;
    }
    .show-col-when-xs{
        display:initial;
    }
    .show-col-when-sm{
        display:none!important;
    }
    .show-col-when-md{
        display:none!important;
    }
    .show-col-when-lg{
        display:none!important;
    }
    .show-col-when-xl{
        display:none!important;
    }
 }
 @media (min-width: $sm) and ( max-width:$md) {
    .hide-col-when-xs{
        display:initial;
    }
    .hide-col-when-sm{
        display:none!important;
    }
    .hide-col-when-md{
        display:initial;
    }
    .hide-col-when-lg{
        display:initial;
    }
    .hide-col-when-xl{
        display:initial;
    }
    .show-col-when-sm{
        display:initial;
    }
    .show-col-when-md{
        display:none!important;
    }
    .show-col-when-lg{
        display:none!important;
    }
    .show-col-when-xl{
        display:none!important;
    }
 }
 @media (min-width: $md)  and ( max-width:$lg){
    .hide-col-when-xs{
        display:initial;
    }
    .hide-col-when-sm{
        display:initial;
    }
    .hide-col-when-md{
        display:none!important;
    }
    .hide-col-when-lg{
        display:initial;
    }
    .hide-col-when-xl{
        display:initial;
    }
    .show-col-when-md{
        display:initial;
    }
    .show-col-when-lg{
        display:none!important;
    }
    .show-col-when-xl{
        display:none!important;
    }
 }
 @media (min-width: $lg ) and ( max-width:$xl) {
    .hide-col-when-xs{
        display:initial;
    }
    .hide-col-when-sm{
        display:initial;
    }
    .hide-col-when-md{
        display:initial;
    }
    .hide-col-when-lg{
        display:none!important;
    }
    .hide-col-when-xl{
        display:initial;
    }
    .show-col-when-lg{
        display:initial;
    }
    .show-col-when-xl{
        display:none!important;
    }
}
 @media (min-width: $xl) {
    .hide-col-when-xs{
        display:initial;
    }
    .hide-col-when-sm{
        display:initial;
    }
    .hide-col-when-md{
        display:initial;
    }
    .hide-col-when-lg{
        display:initial;
    }
    .hide-col-when-xl{
        display:none!important;
    }
    .show-col-when-xl{
        display:initial;
    }
}