Modal button positioning on mobile

I am designing a design system for my company and am currently looking at designing the modals and dialogues for both desktop(tablet too) and mobile.

I have placed the primary action to the bottom right of the modal and any secondary actions, such as cancel or 'save draft' on the left. This just uses CSS floats.

Large modal design

However on mobile, I am not sure how to position the buttons if there is more than two. If there was just cancel and submit, either this would fit on the one line depending on screen size, or they would stack (I just need to update the CSS to allow this to happen) ontop of each other which also should work fine for the user.

However if there is more than 2, the order if they all stack will not particularly be intuitive for the user.

Small modal design

ignore the glitchiness - I can fix this just with a bit of CSS but I wanted to get opinions of others who have maybe designed something similar.

Stacking them like -

Cancel

SaveDraft

Submit

Wouldn't particularly make sense, but nor would

CancelSave Draft

Submit

I would really appreciate any help to let me know of common patterns here?

Thanks so much

Tags: