How to remove extra code when viewing a site on mobile devices?

Question

css

I got a "responsive" site. Responsiveness is implemented using Bootstrap 3. To display the necessary content on mobile devices, unnecessary blocks were hidden by classes like: hidden-xs, etc.
As a result, the goal seems to have been achieved, however, at the same time, unnecessary traffic is downloaded on mobile devices, although it is hidden from the user's eyes.
Is it possible to remove unnecessary hidden code for mobile devices without converting the site to mole versions on the m.syte.ru subdomain?

Answer 1

Can't be removed. Everything will be downloaded! You will have to make a site on m.example for mobile phones.

Answer 2

Check by useragent and simply do not display the banal if
But there are pitfalls here.

Answer 3

this can only be done using php.
We, in turn, made our own tag that already checks which device and then deletes everything from php, including itself if it is a phone.
The only way.
The bootstrap itself is just a layout.

Answer 4

get the screen resolution like here www.php.net/manual/ru/faq.html.php#faq.html.javasc...
then output the desired content via if else and don't need a new domain