You would use media queries to achieve this.
https://developer.mozilla.org/en-US/docs/CSS/Media_queries
The basic idea is to design from mobile up, or "responsive" design. You should google search that for more insight.
You then use such operators as
@media only screen and (max-width: 480px){
#content{
display:block;
}
}
for example, to define how a particular element changes for each view. There are tons of resources for this that can be found with basic searches, so the need to outline in detail here is none.
You can also add in specific style sheets like so:
<link rel="stylesheet" media="all and (max-width: 480px)" href="http://foo.bar.com/stylesheet.css" />
if you want to separate the style sheets for each view.
good luck.
If you have specific questions, feel free to ask and I can update.