Sample styles to show / hide based on responsive breakpoints.

breakAt.less

@import "breakpoints.less";

/**Font awesome : http://fontawesome.io*/
@mobilePhone: "\f10b"; //fa-mobile
@tablet: "\f10a"; //fa-tablet
@laptop: "\f109"; //fa-laptop
@desktop: "\f11c"; //fa-keyboard-o
@widescreen: "\f108"; //fa-desktop
@tv: "\f26c"; //fa-television

/**Simple style to show current break-point*/
.breakAt {
    &:before {
        font-family: FontAwesome;
    }
}

//default is phone
@media screen and (max-width:@mobileBreakpoint) {
    .breakAt {
        &:before {
            content: @mobilePhone;
        }

        &.showText::after {
            content: " Mobile";
        }
    }
}

@media screen and (min-width:@mobileBreakpoint) and (max-width:@tabletBreakpoint) {
    .breakAt {
        &:before {
            content: @tablet;
        }

        &.showText::after {
            content: " Tablet";
        }
    }
}

@media screen and (min-width:@tabletBreakpoint) and (max-width:@desktopBreakpoint) {
    .breakAt {
        &:before {
            content: @laptop;
        }

        &.showText::after {
            content: " Laptop";
        }
    }
}

@media screen and (min-width:@desktopBreakpoint) and (max-width:@largeMonitorBreakpoint) {
    .breakAt {
        &:before {
            content: @desktop;
        }

        &.showText::after {
            content: " Desktop";
        }
    }
}

@media screen and (min-width:@largeMonitorBreakpoint) and (max-width:@widescreenMonitorBreakpoint) {
    .breakAt {
        &:before {
            content: @widescreen;
        }

        &.showText::after {
            content: " Wide screen";
        }
    }
}

@media screen and (min-width:@widescreenMonitorBreakpoint) {
    .breakAt {
        &:before {
            content: @tv;
        }

        &.showText::after {
            content: " TV";
        }
    }
}

breakpoints.less

// -- mobile before here
@mobileBreakpoint: 320px;
//--- tablet in here ---
@tabletBreakpoint: 768px;
//--- laptop in here ---
@desktopBreakpoint: 992px;
//-- desktop in here --
@largeMonitorBreakpoint: 1200px;
//-- wide screen in here --
@widescreenMonitorBreakpoint: 1920px;
//-- TV after here.

breaks.less

@import "breakpoints.less";

@media screen and (max-width:@mobileBreakpoint) {
    .tabletOrBigger, .laptopOrBigger, .desktopOrBigger, .widescreenOrBigger, .tvOrBigger {
        display: none;
    }
}

@media screen and (min-width:@mobileBreakpoint) and (max-width:@tabletBreakpoint) {
    .laptopOrBigger, .desktopOrBigger, .widescreenOrBigger, .tvOrBigger {
        display: none;
    }

    .mobileOrSmaller{display:none;}
}

@media screen and (min-width:@tabletBreakpoint) and (max-width:@desktopBreakpoint) {
    .desktopOrBigger, .widescreenOrBigger, .tvOrBigger {
        display: none;
    }

    .tabletOrSmaller, .mobileOrSmaller {
        display: none;
    }
}

@media screen and (min-width:@desktopBreakpoint) and (max-width:@largeMonitorBreakpoint) {
    .widescreenOrBigger, .tvOrBigger {
        display: none;
    }

    .laptopOrSmaller, .tabletOrSmaller, .mobileOrSmaller {
        display: none;
    }
}

@media screen and (min-width:@largeMonitorBreakpoint) and (max-width:@widescreenMonitorBreakpoint) {
    .tvOrBigger {display:none;}

    .desktopOrSmaller, .laptopOrSmaller, .tabletOrSmaller, .mobileOrSmaller {
        display: none;
    }
}

@media screen and (min-width:@widescreenMonitorBreakpoint) {
    .widescreenOrSmaller, .desktopOrSmaller, .laptopOrSmaller, .tabletOrSmaller, .mobileOrSmaller {
        display: none;
    }
}