Thank you so much Gary, adding those classes worked a treat.
I had attempted giving Search .col-md-3, but - slap ma forehead - hadn't thought to give the menu its corresponding .col-md-9.
The trouble I had with getting Search in the topbar was I couldn't slip it in there via drag and drop, while I could drag it into other areas fine. Due the class issue, perhaps.
I'd like to take it a step further if possible and get the whole topbar, both menu and search, to hide under the toggle in small displays. At present only the menu is hidden. See screenshot from Firefox Responsive View at 768px wide. Do I need to (learn to) edit the template or can it be done with a CSS class?