When the user holds their phone horizontally, toolbar should go vertical and on the right (or left ?)

[enjoysmath]

Currently: the buttons are always on top of the page regardless of the phone's orientation (horizontal / vertical).

Instead we want:

horizontal => vertical toolbar buttons on the right (or left; we need to decide what is more ergonomic)
vertical => what we currently have: horizontal tool bar at the top of the page.

Can we do this in BSS using CSS Media Queries some how?

Reason:
When the user holds their phone screen horizontal, there isn't much vertical space left to draw diagrams in.

[enjoysmath]

@djpeachyclean88 @DevEnjoysMath

Clarification:

Note: this feature is in addition to/independent from the fact that buttons shrink / grow & navbar collapses (if we do have this navbar collapse toggle button - currently defeatured).

On large screens, the buttons will always be at the top. In version 2 it may be possible to have a user option to change toolbar position & orientation.

How can we do this? One way is media queries in CSS, which you specify from within BSS. Not sure whether there exists a better method.

---

Edit Just realized buttons were in the exact same position as before rotation (in above image), so it's the buttons that rotate 90 degrees the other direction, so that they're still readable normally by the user.

This is a very tricky feature, so will be helping on it.

[enjoysmath]

Example media query docs