How do I Implement Different HTML Code for Specific Screen Sizes? (without Bootstrap)

Question

So, I am currently attempting to make my webpage change format according to the screen width of the device it is viewed on. I have two separate projects, one specifically formatted for mobile screens and one specifically for desktop/tablet screens.

The problem with having only CSS changes (using the @media query) is that not only is the search input in different locations (desktop it is in the last li tag, for mobile it is the first li tag), but also the checkbox input that makes the mobile drop-down work is messing up the desktop/tablet version when I try to use the same html code for both using the mobile html code (hovering doesn't work correctly). Is there a method (other than Bootstrap) for me to specify or change these html code differences on my header so it will switch from one to another based off of a specific width that I can state (basically @media query but for html too)? Or is there another option?

Here is the HTML code for my mobile version:

<div class="wrap">
<span class="decor"></span>
<nav>
  <ul class="primary" class="sub">
        <li class="search"> 
              <form  method="post" action="#"  id="searchform"> 
        <img id="search-icon" src="https://image.ibb.co/mObvmk/search.png">
        <input  class="search-input" type="text" name="search-input" placeholder="Search..." /> 
        <input  type="submit" name="submit" value="Go" id="search-btn" /> 
      </form>
    </li>
    <li><a href="#">Home</a></li>
    <li><a href="#">Highlights</a></li>
    <li class="ul-li">
      <input type="checkbox" />
      <a href="#" >Art <img height="10" class="dropdown-icon" src="https://maxcdn.icons8.com/Share/icon/Arrows//expand_arrow1600.png" alt=""></a>
      <ul class="ul-li-ul">
        <li><a href="#">Drawing Academy</a></li>
        <li><a href="#">2009-2013</a></li>
        <li><a href="#">Cartoons</a></li>
      </ul>
    </li>
    <li><a href="#">Music</a></li>
    <li class="ul-li"> <input type="checkbox" /><a href="#">Handcrafted <img height="10" class="dropdown-icon" src="https://maxcdn.icons8.com/Share/icon/Arrows//expand_arrow1600.png" alt=""></a>
       <ul class="ul-li-ul">
        <li><a href="#">Jewelry Making</a></li>
        <li><a href="#">Skin Care</a></li>
      </ul>
      </li>
    <li><a href="#">Literature</a></li>

  </ul>
</nav>
</div>

Here is code for my desktop version:

<div class="wrap">
<span class="decor"></span>
<nav>
  <ul class="primary" class="sub">
    <li><a href="#">Home</a></li>
    <li><a href="#">Highlights</a></li>
    <li class="ul-li">
      <input type="checkbox" />
      <a href="#" >Art <img height="10" class="dropdown-icon" src="https://maxcdn.icons8.com/Share/icon/Arrows//expand_arrow1600.png" alt=""></a>
      <ul class="ul-li-ul">
        <li><a href="#">Drawing Academy</a></li>
        <li><a href="#">2009-2013</a></li>
        <li><a href="#">Cartoons</a></li>
      </ul>
    </li>
    <li><a href="#">Music</a></li>
    <li class="ul-li"> <input type="checkbox" /><a href="#">Handcrafted <img height="10" class="dropdown-icon" src="https://maxcdn.icons8.com/Share/icon/Arrows//expand_arrow1600.png" alt=""></a>
       <ul class="ul-li-ul">
        <li><a href="#">Jewelry Making</a></li>
        <li><a href="#">Skin Care</a></li>
      </ul>
      </li>
    <li><a href="#">Literature</a></li>
        <li class="search"> 
              <form  method="post" action="#"  id="searchform"> 
        <img id="search-icon" src="https://image.ibb.co/mObvmk/search.png">
        <input  class="search-input" type="text" name="search-input" placeholder="Search..." /> 
        <input  type="submit" name="submit" value="Go" id="search-btn" /> 
      </form>
    </li>
  </ul>
</nav>
</div>

Thanks.

Answer 1

.mob{
    display:none;
}
.desk{
    display:block
}
@media only screen and (max-width: 720px) {
    .desk{
        display:none;
    }
   .mob{
       display:block;
   }
}

Sample Fiddle..