SharePoint 2013 Responsive design

SharePoint 2013 Responsive design

I am trying to change the some colors and show and hide some web parts based on the device where the site opned.

Use 2 different master pages and using Device channel feature implement different master pages for different devices.

Now how to change the content style on the page based on device.
I am using Content Editor webpart
Inside content edit webpart i am calling one .txt file where i have added all styles.

First open your web site from computer and find the id of your webparts.

Importent: How to access the class of any webpart or div
#<WebPartID or DIvId> .className
{
// Add all your styles here...
border-bottom-color: red;
background-color: lightgreen;
border-top: 5px dashed;
}

Ex of my style:

open notepad and copy below code.
Save as S.txt
Add s.txt in the content editor webpart

In the below code i have 2 webparts(WebPartWPQ3,WebPartWPQ5)
I am showing and hiding based on the width of page.
Try this in computer and tablet and mobile
you can see the difference.

<style type="text/css">

@media only screen
and (min-width: 480px)
and (orientation: landscape)
{

#MSOZoneCell_WebPartWPQ3
{
display: none;
}
#MSOZoneCell_WebPartWPQ5
{
display: block;
}
}
@media only screen
and (min-width: 10px)
and (orientation: landscape)
{

#MSOZoneCell_WebPartWPQ3
{
display: none;
}
#MSOZoneCell_WebPartWPQ5
{
display: block;
}
}
/********** Phone Portait **********/
@media only screen
and (min-width: 480px)
and (orientation: portrait)
{

#MSOZoneCell_WebPartWPQ3
{
display: none;
}

#MSOZoneCell_WebPartWPQ5
{
display: block;
}

}
@media only screen
and (min-width: 10px)
and (orientation: portrait)
{

#MSOZoneCell_WebPartWPQ3
{
display: none;
}

#MSOZoneCell_WebPartWPQ5
{
display: block;
}

}

/********** Tablet Landscape **********/
@media only screen
and (min-width: 1024px)
and (orientation: landscape)
{

#MSOZoneCell_WebPartWPQ5
{
display: none;
}
#MSOZoneCell_WebPartWPQ3
{
display: block;
}

}

/********** Tablet Portait **********/
@media only screen
and (min-width: 1024px)
and (orientation: portrait)
{

#MSOZoneCell_WebPartWPQ3
{
display: none;
}
#MSOZoneCell_WebPartWPQ5
{
display: block;
}

}

</style>