Responsive is the way to go, not only do you get to keep the same functionality and (overall) design across devices, but you also don't have to worry about redundant things like adding changes to multiple to multiple themes. Flexbox makes implementing a responsive template very easy, and I'd highly recommend looking into that, and just taking advantage of CSS3 in general.
Like brsy and Josh said, responsive is the best solution. Mobile sites are mainly something because there was no good way in the past. It may cost some time to figure out how to make a good responsive website, but in the long term it spares you so much time. Besides that, phones keep changing and getting bigger, there are tablets, etc. Making a mobile version also costs you double the amount of time when you change a functionality, as you need to change it in 2 sites instead of one.
... Making a mobile version also costs you double the amount of time when you change a functionality, as you need to change it in 2 sites instead of one.
Pretty late to respond here but all the main points have been covered from @brsy , @Exalted and @Bob Ross .
It really is the modern, most effective and practical way of doing things.. It's not "wrong" per say to chose the other method, it's just long winded and 9 times out of 10, as development continues, the designer/dev (whoever is in charge) will find it difficult to maintain and keep with a consistent design across both devices.
Just a quick heads up for responsive design, look into mobile first (if you're doing it all from scratch). Mobile first > scaling down.