diff --git a/core/themes/seven/js/responsive-details.js b/core/themes/seven/js/responsive-details.js
new file mode 100644
index 0000000..f614ed7
--- /dev/null
+++ b/core/themes/seven/js/responsive-details.js
@@ -0,0 +1,47 @@
+/**
+ * @file
+ * Responsive details elements
+ */
+(function ($, Drupal) {
+
+  'use strict';
+
+  function init(context) {
+    var $statusDetails = $(context).find('.system-status-report__entry');
+
+    function closeAllDetails() {
+      // If user explicitly opened one, leave it alone
+      $statusDetails.each(function() {
+        $(this).find('summary[aria-pressed!=true]')
+          .parent('details')
+          .attr('open', false);
+      })
+    }
+
+    function openAllDetails() {
+      $statusDetails.attr('open', true);
+    }
+
+    function handleResize(e) {
+      var desktop = window.matchMedia('(min-width:48em)');
+      if (desktop.matches) {
+        openAllDetails()
+      }
+      else {
+        closeAllDetails();
+      }
+    }
+
+    $(window).on('resize.details', Drupal.debounce(handleResize, 150)).trigger('resize.details');
+  }
+
+  /**
+   * Initialise the tabs JS.
+   */
+  Drupal.behaviors.navTabs = {
+    attach: function (context, settings) {
+      init(context);
+    }
+  };
+
+})(jQuery, Drupal);
diff --git a/core/themes/seven/seven.libraries.yml b/core/themes/seven/seven.libraries.yml
index c7f40e1..1b05ab2 100644
--- a/core/themes/seven/seven.libraries.yml
+++ b/core/themes/seven/seven.libraries.yml
@@ -77,6 +77,15 @@ drupal.nav-tabs:
     - core/jquery.once
     - core/drupal.debounce

+drupal.responsive-detail:
+  version: VERSION
+  js:
+    js/responsive-details.js: {}
+  dependencies:
+    - core/matchmedia
+    - core/jquery
+    - core/drupal.debounce
+
 vertical-tabs:
   version: VERSION
   css:
diff --git a/core/themes/seven/templates/status-report.html.twig b/core/themes/seven/templates/status-report.html.twig
index b722455..99f42fd 100644
--- a/core/themes/seven/templates/status-report.html.twig
+++ b/core/themes/seven/templates/status-report.html.twig
@@ -124,6 +124,7 @@
 </div>

 {{ attach_library('core/drupal.collapse') }}
+{{ attach_library('seven/drupal.responsive-detail') }}

 <div class="system-status-report">
   {% for group in grouped_requirements %}