diff --git a/core/misc/dropbutton/dropbutton.css b/core/misc/dropbutton/dropbutton.css
index f0898747debeebf635d201f1413870af6cc0fd25..5990514f09a4f687904dfe2d12e674e946ef1f4f 100644
--- a/core/misc/dropbutton/dropbutton.css
+++ b/core/misc/dropbutton/dropbutton.css
@@ -24,11 +24,13 @@
 }
 
 /* Splitbuttons */
-.form-actions .dropbutton-wrapper {
-  float: left; /* LTR */
-}
-[dir="rtl"] .form-actions .dropbutton-wrapper {
-  float: right;
+@media screen and (min-width:600px) {
+  .form-actions .dropbutton-wrapper {
+    float: left; /* LTR */
+  }
+  [dir="rtl"] .form-actions .dropbutton-wrapper {
+    float: right;
+  }
 }
 .js .form-actions .dropbutton-widget {
   position: static;
diff --git a/core/themes/seven/css/components/dropbutton.component.css b/core/themes/seven/css/components/dropbutton.component.css
index 264f29071d16e10ffaf62b419ccf346f7a20336a..265499da1fd954678bb1e36359d5c11dd429a380 100644
--- a/core/themes/seven/css/components/dropbutton.component.css
+++ b/core/themes/seven/css/components/dropbutton.component.css
@@ -25,19 +25,48 @@
 /**
  * Overwrite Sevens button styling.
  */
-.dropbutton-widget .button {
+.js .dropbutton-widget .button {
   background: transparent;
   border: 0;
   border-radius: 0;
   box-shadow: none;
 }
-.dropbutton-multiple .dropbutton {
+.js .dropbutton-multiple .dropbutton {
   border-right: 0; /* LTR */
 }
-[dir="rtl"] .dropbutton-multiple .dropbutton {
+[dir="rtl"].js .dropbutton-multiple .dropbutton {
   border-left: 0;
 }
 
+/**
+ * Show dropbutton elements as buttons when javascript is disabled
+ */
+.dropbutton {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+.dropbutton li + li {
+  margin-top: 10px;
+}
+.js .dropbutton li {
+  margin-bottom: 0;
+  margin-right: 0;
+}
+.js .dropbutton li + li {
+  margin-top: 0;
+}
+
+@media screen and (min-width: 37.5625em) { /* 601px */
+  .dropbutton li {
+    display: inline-block;
+  }
+  .dropbutton li + li {
+    margin-left: 1em;
+    margin-top: 0;
+  }
+}
+
 /**
  * Copied styling for .button.
  */