It all depends on whether the smaller layout is based on the larger layout or whether its a completely different layout altogether? Remember you can't change html with media queries so you don't want to manage 2 sites on one page. if its just re-arranging things a bit the usual width media queries are the way to go.
You can use device width rather than layout width to target devices but your 720px doesn't seem to correspond to common devices and will miss the ipad. Of course you may mean screen resolution width rather than device width as they are different things.
That's the problem with dealing with devices as you never know what you are going to get and why its better to sidestep the issue altogether and design for all devices by creating fluid layouts that just fit anywhere. Of course you can move things around a bit and hide unnecessary elements on smaller devices but triggering the changes at pre-defined widths is a bit hit and miss unless the layout is already flexible enough.
Bootstrap already has mobile support built in and a lot of its grid will adapt as required but of course you need to make sure the content contained within is also managed as effectively.
Without seeing the 2 layouts you have to code its hard to hard to give a specific answer.
Maybe your client wants a separate mobile site (not recommended) and then you would detect (js) and redirect to a mobile version of the site specifically optimised for mobile and using different html and css. Generally this is not the best approach unless you have the resources to manage two sites and even then it's not considered a good option.