What is the best way to make one page for mobile from a multi-page (30 pages) and add it to the main site?

Question

HTML

There is a handwritten multi-page on bootstrap, in which the designer decided to place many, many pictures. The site is made for resolutions over 1200px and for resolutions from 1200px to 1000px. In order not to bother with a large number of images (their scaling - transformation, etc.), an idea arose - to make one site (long) for smartphones.
The question arises: How to "add" a one-pager to this main site? I would not like to "add" it to each page of this multi-page, duplicating the code. How to make it one page, but so that it loads itself when the screen resolution is less than 1000px?

Answer 1

You can determine the device by http header and give the server the desired page for mobile phones and tablets. But with a redirect, the server response speed decreases.