responsive grouped

[nomeata]

I am using grouped to group form element horizontally:

                <form method="GET">
                <p class="grouped">
                <input type="text" name="q" value="{html.escape(query)}"/>
                <button type="submit">#find</button>
                <button type="submit" name="lucky" value="yes" title="Directly jump to the      documentation of the first hit.">#lucky</button>
                </p>
                </form>

But on mobile, this degrades badly:

Is there a simple way so that on narrow screens, the three form elements are stacked vertically?