Pin Panels

Panels could be pinned into the header responsively with hidden-*-down classes. Use data-smart-icon attribute to specify an icon class

Change the browser window width to monitor the responsive pin in action

Responsive Pin

Class: hidden-xl-down

Smart Icon: default

Panel Active Width: Aside Width

Responsive Pin

Class: hidden-lg-down

Smart Icon: ion-person

Panel Active Width: col-xl-3

Responsive Pin

Class: hidden-md-down

Smart Icon: fa fa-comments

Panel Active Width: col-lg-4 col-xl-3

Responsive Pin

Class: hidden-sm-down

Smart Icon: fa fa-envelope

Panel Active Width: col-md-6 col-lg-4 col-xl-3

Responsive Pin

Class: hidden-xs-down

Smart Icon: fa fa-mobile-phone

Panel Active Width: col-sm-12 col-md-6 col-lg-4 col-xl-3