title: dynamic serving mobile & desktop website using bootstrap (js, html)
body: <p>I originally designed the whole website (single page) responsive, readapting simply using css and some inline classes from bootstrap 4.</p>
  
  <p>Now i found myself in need of redesigning the whole desktop version (or let's say with a very different structure from how it currently looks on mobile).</p>
  
  <p>So I'd like to keep the html i have and keep using it for mobile, and modify a copy of it and use it for desktop.</p>
  
  <p>The easiest way i thought has been to keep a single index.html file as now, duplicate the whole index.html inner part (between the div with class="page", which basically comes right after body) and set one of them to <code>class="page d-none d-lg-block"</code> and the other one <code>class="page d-block d-lg-none"</code> , using bs4 classes to show/hide content based on screen size.</p>
  
  <p>I have various inline js functions and other functions in js files which refer to ids, so my feel is that creates errors because js see same ids twice or some stuff appears as the page load (due to the bs4 inline class to show the content), but just to be sure does anyone know if this is a correct thing to do (also SEO wise)? Or will it mess with the javascript doing so?</p>