I'm attempting to migrate some of my already existing pages over to bootstrap 3, and I'm wondering the best design to do this.

On the non-mobile devices, I display a list of items on the left. If you click an item, it will either render a detail section or pop up a dialog.

On mobile, however, I need this to slide into a new edit page.

I've been googling how to do this with a single set of responsive bootstrap code, but I haven't seen anything that quite matches what I'm looking for.

It would seem to me that I need completely different templates. One for mobile and one for non-mobile. Is there a better way to go about this, or is this the right approach?

  • Curious why all the downvotes on this question?
    – Scottie
    May 18, 2016 at 16:38
  • Your question is far too broad where this platform is for asking a specific question that gives a specific answer.
    – Rob
    Mar 20, 2017 at 11:10
  • simple responsivness really fits for desktop/tablets, for mobile you will probably need to redesign your navigation system, remove unnecessary fonction. Check how this site is on a desktop and a mobile, you'll see that on a mobile quite some things are missing.
    – Walfrat
    May 19, 2017 at 11:18

3 Answers 3


You could use media queries which hide/display separate 'sidebars' That way you can keep all of your original content together and just have two separate link lists (one for mobile another for non-mobile) and have them do separate things.

You want to reduce the amount of duplicate code. If it is more thank just the actions of the links then you may want to consider a whole new template.


I think there must be different pages for mobile. The ideal experience on both are diffrent.

The screen size is so small that a fixed 25 pixel width is a much larger percent of the screen. On non mobile, collums are easier to read than long lines of text.

Another thing is touch screen for mobile. Much more common, especially with iPhones. On non mobile, tabs can take you in order through a page. Assuming you have any buttons or text boxes, being guided through in the right order is nice.


It's good idea to consider creating new templates for migration as the old templates rarley fit for responsive design.

  • 1
    I should probably clarify... I am redesigning to be fully responsive, however, what I don't know is do I use one .html file for mobile and a different .html for everything else?
    – Scottie
    May 10, 2016 at 22:30
  • You can use the same html and make it work for both mobile and desktop. May 10, 2016 at 22:34

Not the answer you're looking for? Browse other questions tagged or ask your own question.