Change website design for mobile devices or browser resize

Question

Im sorry if this has been asked before im sure somewhere there must be an answer for this but for some or other reason I cant find it, probably using wrong search query

I know you can use media queries to target different devices like so:

@media only screen and (max-device-width: 480px) {
    div#wrapper {
        width: 400px;
    }
}

But what I would like to know is, how to change my websites design based on device it is viewed on?

Example

Lets say my normal site structure is like this:

if desktop

<div id="user">
    <div id="profilePic">
        <img src="images/responSiveTest/ppic.PNG" class="p-img" />
    </div>
    <div id="uname">
        <h4 style="color:white">Welcome  Guest</h4>
        <p style="color:white">Please Log in</p>
    </div>
</div>

Now when user views my site on a mobile device how do I change my div / site layout, lets say to something different like this

if Mobile device

<div id="mobileNav">
    <div id="namePic">
        <!-- Mobile user -->
    </div>
</div>

Hope what im asking makes sense, thanks to everyone on this amazing site for helping

Answer 1

I usually do this in my projects. I prepare content by default but its set to display: none, when media query detects the mobile device width it will render appropriate content for the device.

with CSS Media Query

HTML

<div id="content">
    <div class="desktop">
        <!--
            some content and markups here. by default this is loaded in desktop
        -->
    </div>

    <div class="mobile_device_380px">
        <!-- content and some markups for mobile -->
    </div>

    <div class="mobile_device_480px">
        <!-- content and some markups for mobile -->
    </div>
</div>

CSS

  /* if desktop */
    .mobile_device_380px {
        display: none;
    }
    .mobile_device_480px {
        display: none;
    }


    /* if mobile device max width 380px */
    @media only screen and (max-device-width: 380px) {
        .mobile_device_380px{display: block;}       
        .desktop {display: none;}
    } 

    /* if mobile device max width 480px */
    @media only screen and (max-device-width: 480px) {
       .mobile_device_480px{display: block;}
       .desktop {display: none;}
    }

Take note your page might take long to load. just limit what you need to change and be specific.