Targeting Screen or Devices

To target Device , we can simply add device prefix at the very begin-ing of classname. for eg:-

<p class="xs-dn">This will not show in smaller device</p>

or using semantic classname

<p class="xs-display-none">This will not show in smaller devices</p>

Device Guide Table

AliasCSS Device Prefix	CSS Selector
print	@media print
xs	@media (max-width : 576px)
sm	@media (min-width : 576px)
md	@media (min-width : 768px)
lg	@media (min-width : 992px)
xl	@media (min-width : 1200px)
xxl	@media (min-width : 1408px)
-xs	@media (min-width : 576px)
-sm	@media (max-width : 576px)
-md	@media (max-width : 768px)
-lg	@media (max-width : 992px)
-xl	@media (max-width : 1200px)
-xxl	@media (max-width : 1408px)
dark	@media (prefers-color-scheme: dark)
light	@media (prefers-color-scheme: light)

Any of the above prefix can be used, these prefix must be the at the begin-ing of the classnames. Few examples:-

Define

<div class="xs-flex-direction-column">...</div>
<!--using shorthand !-->
<div class="xs-fdc">...</div>

Compiled

@media (max-width : 576px) {
    .xs-flex-direction-column{
            flex-direction: column ;
        }
}

Define

<div class="xs_p-flex-direction-column">...</div>
<!-- using shorthand  -->
<div class="xs_p-fdc">...</div>

Compiled

@media (max-width : 576px) { 
    .xs_p-flex-direction-column p{
        flex-direction: column ;
    }
}

Define

<div class="md-width500px">...</div>
<!-- using shorthand -->
 <div class="md-w500p">...</div>

Compiled

@media (min-width : 768px){
    .md-width500px{
         width:500px ;
    }
}