Css navigation menu positioning

See more:

menu

CSS3

HTML5

I have a problem with some html object on my mobile view of menu. My menu change, depents on device's screen resolution. I'm using media query. That's my site: goo.gl/TDmP4q . And when you visit my site with a computer: http://i.imgur.com/epPUSCi.png[^] ; And and with a smart phone, tablet, tv.. Well . Here comes the problem: http://i.imgur.com/OYzTCm4.png[^] I want to move logo and title to the right upper conner, but ONLY when visiting with smartphone, tablet... (NOT PC!!). Here is a HTML code:

<header>
           <div id="nav">
               <nav class="nav-collapse">
               <ul>
                   <li>
                       <img alt="icon" src="res/img/logo2.png">
                   </li>
                   <li>
                        <a rel="alternate" href="#" class="current" class="nav-collapse">Domov</a>

                   </li>
                   <li>
                        <a href="sub/menu1.html">Člani</a>
                   </li>
                   <li>
                        <a href="sub/menu2.html">Kontrolke</a>
                   </li>
                   <li>
                        <a href="sub/menu3.html">Urnik</a>
                   </li>
                   <li>
                        <a href="sub/menu4.html">O nas</a>
                   </li>
                   <li>
                        <a class="fck" href="password.html">Zasebna Stran</a>
                   </li>
                   <li id="title">Razredna Stran - R1A</li>
               </ul>
               </nav>
           </div>
           </header>

And my CSS code:

  #nav {
        font-family:"Lobster";
        font-size:22px;
    }
    #nav #title {
        color:white;
        font-weight:bold;
        margin-top:15px ;
        margin-right:20px;
        float:right;
        font-size:26px;
    }
    #nav a {
        float:left;
    }
    #nav img {
        float:left;
        height:48px;
        margin-top:5px;
        margin-left:10px;
        margin-right:10px;
    }
    #nav ul {
        list-style-type:none;
        margin:0;
        padding:0;
        overflow:hidden;
        background-color:#454443;
        border-bottom:3px solid #757575;
    }
    #nav li a {
        display:block;
        color:white;
        text-align:center;
        padding:14px 16px;
        text-decoration:none;
        border-bottom:3px solid #454443;
    }
    #nav li a:hover {
        animation-name:navlink;
        animation-duration:0.35s;
        background:#0276F2;
        border-bottom:3px solid #325AFA;
    }
    #nav li a.current {
        border-bottom:3px solid #325AFA;
    }
    @keyframes navlink {
        from {
            background-color:#3D362B;
        }
        to {
            background-color:#0276F2;
        }
    }


.nav-collapse,
.nav-collapse ul {
  list-style: none;
  width: 100%;
  float: left;
}

@media screen and (max-width: 480px) {
  .nav-collapse {
    float: left;
    width: auto;
  }
}

.nav-collapse li {
  float: left;
  width: 100%;
}

@media screen and (min-width: 58em) {
  .nav-collapse li {
    width: auto;
  }
}

.nav-collapse a {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  border-top: 1px solid white;
  text-decoration: none;
  background: #454443;
  color: #fff;
  width: 100%;
  float: left;
}

    
.nav-collapse a:active,
.nav-collapse .active a {
  background: #325AFA;
}

@media screen and (min-width: 58em) {
  .nav-collapse a {
    
    text-align: center;
    border-top: 0;
    float: left;
    margin: 0;
  }
}

.nav-collapse ul ul a {
  background: #ca3716;
  padding-left: 2em;
}

@media screen and (min-width: 58em) {
  .nav-collapse ul ul a {
    display: none;
  }
}

What I have tried:

I tried moving nav-collapse class (in html code)... To the point, where icon and title won't be in nav class... But It doesn't work.