I would follow your first impulse and go responsive - I feel that when implemented properly it makes for a better user experience. Use a responsive CSS library and some javascript MVC frameworks/templating libraries to do your heavy lifting on the client side.
Addressing your concerns:
Low Quality Code from Handling Disparate Prototypes
I think using battle tested JS and CSS libraries and best practices should help you here. Think along the lines of backbone, knockout or angular to provide your clientside code with structure.
Sending Unneeded Code Files to Mobile Devices
I don't think this will that big an issue. Build out mobile functionality first and go from there. This will ensure you get the core functionality created and allow you to build out to the bigger devices from there. Use only the bare necessities to keep things light. If you use templating engines you can reduce the amount of HTML you're sending over the wire. Combine and minify JS and CSS files on the server side to minimize what you're sending to the mobile devices.
Wasting CSS when Hiding HTML Elements
Use a templating engine. These can either be built into the clientside MVC frameworks or separate (Mustache, Handlebars). This will prevent you from sending over too much extra HTML. Additionally, you can lazy load certain sections if that floats your boat.
Conclusion
A well thought out Responsive Web Design should be capable of either avoiding or minimizing each of the issues. A lot of work has been done in the open source community to help negate those problems. I would highly suggest searching out those solutions and seeing if they are helpful with your project.
Its your team's decision in the end, but make sure you consider the vast number of libraries and elect for the best user experience your team can support within the non-functional requirements (timeline, cost, staff knowledge) of your project.
Popular Libraries
JS MVC: backbone + templating library (see below), Knockout, Angular, Ember
Templating: Handlerbars, Mustache
CSS: Twitter Bootstrap, Foundations, Skeleton
Minification/Combination Tools: Yahoo YUI, UglifyJS
Miscellaneous JS: underscore, require
These are the examples I hear the most about. I've personally used Knockout and Twitter Bootstrap. I'm looking to play around with backbone and Foundations as well though. There is a lot of research to do in this area and not really enough space in a single answer. I think if you start researching these libraries and tools you should find plenty of information to get you to the right endpoint.
Simply said: It is designed not to be separated, but you can.
Frameworks like Django (Python) or Symfony (PHP) are designed to handle both frontend and backend in one application.
This means that a request comes in, the backend tasks are executed and a template is used to generated the corresponding HTML response.
This does mean that all information needs to be gathered and put into html in a single request.
This is a great way of developing for (small) applications with relatively small amounts of data (handling) per view.
It is however completely possible to separate your frontend and backend.
This is most commonly done by making your backend (django in your case) a rest(ful) json api.
And using a JavaScript frontend using something like vue.js as you already have in your current setup.
While I do not have experience with it I would recommend the Django REST framework website for more information
For Symfony development I would recommend FOSRestBundle.
Best Answer
The Django docs never mentioned that a person who doesn't know what HTML/JS/CSS is about can use it. Separation of concerns is done also in the backend, where the actual action(the views) are separated from the database layer or the URL-routing logic - That allows for loose-coupling. It never means you can write views without ever understanding your models. Similarly(well, not that similarly), you do need to have an understanding of HTML/CSS to get basic web pages up. You may or may not want to learn some JS, but I think with HTML5, it is more or less essential to know some JavaScript.
No sane web-developer is going to advise to to use a WYSIWYG editor like DreamWeaver. Write HTML by hand. You may, however, use things like HTML5 Bolierplate to get your project started fast.
Google AppEngine is a PaaS that you can use to deploy your application. It will provide among other things, the Python runtime, a high-replication datastore etc. - but it will not take care of generating your front-end.
If you're going to hire someone to take care of the front-end, that person would anyway have to know how to use Django tags, as really(if you follow the MVC - or MTV pattern closely), they define the blurred line between "static" and "dynamic" web-pages. Even if you choose to hire a frontend-developer, I suggest you grasp the basics of HTML and CSS(at least so much that you know how it works and how are you going to serve the CSS static files). It will only help you in the long run.
Not all people have good design skills, and design is undoubtedly best left to skilled people, but when it comes to actually serving pages with that design, it is all HTML and CSS. So you may hire a person who doubles up(most do) as a front-end designer and a front-end developer. But I suggest you to not remain completely unaware of front-end technologies.