title: Change website design for mobile devices or browser resize
body: <p>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</p>
  
  <p>I know you can use media queries to target different devices like so:</p>
  
  <pre><code>@media only screen and (max-device-width: 480px) {
      div#wrapper {
          width: 400px;
      }
  }
  </code></pre>
  
  <p>But what I would like to know is, how to change my websites design based on device it is viewed on?</p>
  
  <p><strong>Example</strong></p>
  
  <p>Lets say my normal site structure is like this:</p>
  
  <p><strong>if desktop</strong></p>
  
  <pre><code>&lt;div id="user"&gt;
      &lt;div id="profilePic"&gt;
          &lt;img src="images/responSiveTest/ppic.PNG" class="p-img" /&gt;
      &lt;/div&gt;
      &lt;div id="uname"&gt;
          &lt;h4 style="color:white"&gt;Welcome  Guest&lt;/h4&gt;
          &lt;p style="color:white"&gt;Please Log in&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now when user views my site on a mobile device how do I change my <code>div</code> / site layout, lets say to something different like this</p>
  
  <p><strong>if Mobile device</strong></p>
  
  <pre><code>&lt;div id="mobileNav"&gt;
      &lt;div id="namePic"&gt;
          &lt;!-- Mobile user --&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Hope what im asking makes sense, thanks to everyone on this amazing site for helping</p>