Targeting Screen or Devices

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

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

or using semantic classname

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

Device Guide Table

Any of the above prefix can be used, these prefix must be the at the begining 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 ;
    }
}