Bootstrapグリッドシステム用mediaQuery

CSS

/***** Screen ld(991~1299) *****/
.show-phone                         { display:none !important; }
.show-tablet                         { display:none !important; }
.show-screen                        { display:inherit !important; }
    
.hide-phone                            { display:inherit !important; }
.hide-tablet                        { display:inherit !important; }
.hide-screen                        { display:none !important; }

/***** Screen xl *****/
@media only screen and (min-width:1200px) {
.show-phone                         { display:none !important; }
.show-tablet                         { display:none !important; }
.show-screen                        { display:inherit; }

.hide-phone                            { display:inherit !important; }
.hide-tablet                        { display:inherit !important; }
.hide-screen                        { display:none !important; }
}
/***** Screen md *****/
@media only screen and (min-width: 768px) and (max-width: 991px) {
	

.show-phone                         { display:none !important; }
.show-tablet                         { display:inherit !important; }
.show-screen                        { display:none !important; }
    
.hide-phone                            { display:inherit !important; }
.hide-tablet                        { display:none !important; }
.hide-screen                        { display:inherit !important; }
}
/***** Screen sm *****/
@media only screen and (min-width: 544px) and (max-width: 767px) {
	

.show-phone                         { display:inherit !important; }
.show-tablet                         { display:none !important; }
.show-screen                        { display:none !important; }
    
.hide-phone                            { display:none !important; }
.hide-tablet                        { display:inherit !important; }
.hide-screen                        { display:inherit !important; }
}
/***** Screen xs *****/
@media only screen and (max-width: 543px) {
	

.show-phone                         { display:inherit !important; }
.show-tablet                         { display:none !important; }
.show-screen                        { display:none !important; }
    
.hide-phone                            { display:none !important; }
.hide-tablet                        { display:inherit !important; }
.hide-screen                        { display:inherit !important; }
}



コメントは受け付けていません。