JQMResponsive: Responsive Design in jQuery Mobile: CSS File

style.css

.content-secondary {
  width: 40%;
  float: left;
}

.content-primary {
  width: 60%;
  float: left;
}

.show-page-button{
  display: none;
}

img.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* the ':after' selector adds 'content' after the h1 tag */
h1:after{
  content: ': Desktop';
}
/* We use CSS3 media queries to determine which CSS to use
** There are no standards for the size of devices, you will have to determine YOUR best guess,
** which won't be perfect, but will work in most cases.
** if our width is 1024 or less assume and orientation portrait
*/
@media screen and (max-width: 1024px) and (orientation:portrait)
{
  h1:after{
    content: ': TABLET';
  }

  .content{
    height: 100%;
  }

  .content-secondary {
    width: 100%;
  }

  .content-primary {
    width: 100%;
    float: left;
    height: 500px;
  }
}

/* same dimensions, but landscape orientation */
@media screen and (max-width: 1024px) and (orientation:landscape)
{
  h1:after{
    content: ': TABLET';
  }

  .content-secondary {
    width: 40%;
    float: left;
  }

  .content-primary {
    width: 60%;
    float: left;
  }

    .show-page-button{
      display: none;
    }
}

@media screen and (max-width: 480px)
{
  h1:after{
    content: ': Mobile';
  }

  .content-secondary {
    width: 100%;
  }

  .content-primary {
    display: none;
  }

  .show-page-button{
    display: block;
  }

  .squirrel-image{
    width: 290px;
  }
}