How to make TinyMCE Responsive

There is a way to get the toolbars to wrap on smaller screens.

/* make the toolbar wrap */
.mceToolbar td {
    display:table-row;
    float: left;
}
.mceToolbar td:nth-of-type(11){
    clear: left;
}

I made a fork of the fiddle that Johannes posted that includes the above rules:

http://jsfiddle.net/joshfeck/gMVSE/

Making the toolbar responsive for the latest version of TinyMCE:

.tox-toolbar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
}
.tox-toolbar__group {
    flex-wrap: nowrap !important;
}

This adds a horizontal scrollbar to the toolbar on mobile devices.

TinyMCE 5.1 was released with a new mobile responsive design.

To ensure it functions as intended, you need to add the following code to the head of your pages that are using TinyMCE.

<meta name="viewport" content="width=device-width, initial-scale=1">

More information here: https://www.tiny.cloud/blog/the-future-of-work-is-mobile-and-tiny-is-ready-for-it

The TinyMCE editor can be made responsive by using css media queries. Simply add css rules that set the width property of table.mceLayout and the tinyMCE textareas. You will need to enforce these css rules using !important because they would otherwise be overwritten.

E.g., I use css similar to this:

/* on mobile browsers, I set a width of 100% */
table.mceLayout, textarea.tinyMCE {
    width: 100% !important;
}

/* on large screens, I use a different layout, so 600px are sufficient */
@media only screen and (min-width: 600px) {
    table.mceLayout, textarea.richEditor {
       width: 600px !important;
    }
}

See this jsfiddle: http://jsfiddle.net/johannesjh/384uf/

Note: You may wish to use different media queries or css classes to make use to the "foundation framework"'s responsive grid.