diff --git a/core/modules/toolbar/js/views/BodyVisualView.js b/core/modules/toolbar/js/views/BodyVisualView.js
index 6bae4a5..654359d 100644
--- a/core/modules/toolbar/js/views/BodyVisualView.js
+++ b/core/modules/toolbar/js/views/BodyVisualView.js
@@ -25,19 +25,9 @@
      */
     render: function () {
       var $body = $('body');
-      var orientation = this.model.get('orientation');
-      var isOriented = this.model.get('isOriented');
       var isViewportOverflowConstrained = this.model.get('isViewportOverflowConstrained');
 
       $body
-        // We are using JavaScript to control media-query handling for two
-        // reasons: (1) Using JavaScript let's us leverage the breakpoint
-        // configurations and (2) the CSS is really complex if we try to hide
-        // some styling from browsers that don't understand CSS media queries.
-        // If we drive the CSS from classes added through JavaScript,
-        // then the CSS becomes simpler and more robust.
-        .toggleClass('toolbar-vertical', (orientation === 'vertical'))
-        .toggleClass('toolbar-horizontal', (isOriented && orientation === 'horizontal'))
         // When the toolbar is fixed, it will not scroll with page scrolling.
         .toggleClass('toolbar-fixed', (isViewportOverflowConstrained || this.model.get('isFixed')))
         // Toggle the toolbar-tray-open class on the body element. The class is
diff --git a/core/modules/toolbar/js/views/ToolbarVisualView.js b/core/modules/toolbar/js/views/ToolbarVisualView.js
index de4c385..265145f 100644
--- a/core/modules/toolbar/js/views/ToolbarVisualView.js
+++ b/core/modules/toolbar/js/views/ToolbarVisualView.js
@@ -244,9 +244,16 @@
      */
     updateTrayOrientation: function () {
       var orientation = this.model.get('orientation');
+      var isOriented = this.model.get('isOriented');
+
       // The antiOrientation is used to render the view of action buttons like
       // the tray orientation toggle.
       var antiOrientation = (orientation === 'vertical') ? 'horizontal' : 'vertical';
+
+      // Toggle body classes in early scripts execution to avoid toolbar flickering.
+      $('body').toggleClass('toolbar-vertical', (orientation === 'vertical'))
+        .toggleClass('toolbar-horizontal', (isOriented && orientation === 'horizontal'));
+
       // Update the orientation of the trays.
       var $trays = this.$el.find('.toolbar-tray')
         .removeClass('toolbar-tray-horizontal toolbar-tray-vertical')