diff --git a/core/misc/vertical-tabs-rtl.css b/core/misc/vertical-tabs-rtl.css
index 7fb0347..32f1c7e 100644
--- a/core/misc/vertical-tabs-rtl.css
+++ b/core/misc/vertical-tabs-rtl.css
@@ -1,14 +1,14 @@
+@media (min-width: 640px) {
+  div.vertical-tabs {
+    margin: 1em 15em 1em 0;
+  }
 
-div.vertical-tabs {
-  margin-left: 0;
-  margin-right: 15em;
-}
-.vertical-tabs ul.vertical-tabs-list {
-  margin-left: 0;
-  margin-right: -15em;
-  float: right;
-}
-.vertical-tabs ul.vertical-tabs-list li.selected {
-  border-left-width: 0;
-  border-right-width: 1px;
+  .vertical-tabs ul.vertical-tabs-list {
+    margin: -1px -15em -1px 0;
+    float: right;
+  }
+
+  .vertical-tab-widget.selected {
+    border-width: 0 1px 1px 0;
+  }
 }
diff --git a/core/misc/vertical-tabs.css b/core/misc/vertical-tabs.css
index c946503..c307619 100644
--- a/core/misc/vertical-tabs.css
+++ b/core/misc/vertical-tabs.css
@@ -1,57 +1,73 @@
-
 div.vertical-tabs {
-  margin: 1em 0 1em 15em; /* LTR */
+  margin: 1em 0;
   border: 1px solid #ccc;
 }
+
 .vertical-tabs ul.vertical-tabs-list {
-  width: 15em;
-  list-style: none;
-  border-top: 1px solid #ccc;
-  padding: 0;
-  margin: -1px 0 -1px -15em; /* LTR */
-  float: left; /* LTR */
+  display: none;
 }
+
+.vertical-tab-hidden {
+  display: none;
+}
+
 .vertical-tabs fieldset.vertical-tabs-pane {
   margin: 0 !important;
-  padding: 0 1em;
+  padding: 0;
   border: 0;
 }
+
 fieldset.vertical-tabs-pane > legend {
-  display: none;
+  /* Save the legend from shrinkwrapping. */
+  box-sizing: border-box;
+  width: 100%;
+  margin: 0;
+}
+
+.vertical-tabs fieldset.vertical-tabs-pane > div.fieldset-contents {
+  padding: 0 1em;
+  overflow: hidden; /* prevent margin collapse */
 }
 
-/* Layout of each tab */
-.vertical-tabs ul.vertical-tabs-list li {
+.vertical-tab-widget {
   background: #eee;
-  border: 1px solid #ccc;
-  border-top: 0;
+  border-style: solid;
+  border-color: #ccc;
+  border-width: 1px 0 0;
   padding: 0;
   margin: 0;
 }
-.vertical-tabs ul.vertical-tabs-list li a {
+
+legend.vertical-tab-widget.first {
+  border-width: 0;
+}
+
+.vertical-tab-widget a {
   display: block;
   text-decoration: none;
   padding: 0.5em 0.6em;
 }
-.vertical-tabs ul.vertical-tabs-list li a:focus strong,
-.vertical-tabs ul.vertical-tabs-list li a:active strong,
-.vertical-tabs ul.vertical-tabs-list li a:hover strong {
+
+.vertical-tab-widget a:focus strong,
+.vertical-tab-widget a:active strong,
+.vertical-tab-widget a:hover strong {
   text-decoration: underline;
 }
-.vertical-tabs ul.vertical-tabs-list li a:hover {
+
+.vertical-tab-widget a:hover {
   outline: 1px dotted;
 }
-.vertical-tabs ul.vertical-tabs-list li.selected {
+
+.vertical-tab-widget.selected {
   background-color: #fff;
-  border-right-width: 0; /* LTR */
 }
-.vertical-tabs ul.vertical-tabs-list .selected strong {
+
+.vertical-tab-widget.selected strong {
   color: #000;
 }
-.vertical-tabs ul.vertical-tabs-list .summary {
+
+.vertical-tab-widget .summary {
   display: block;
-}
-.vertical-tabs ul.vertical-tabs ul.vertical-tabs-list .summary {
   line-height: normal;
   margin-bottom: 0;
 }
@@ -67,3 +83,32 @@ fieldset.vertical-tabs-pane > legend {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
 }
+
+@media (min-width: 640px) {
+  div.vertical-tabs {
+    margin: 1em 0 1em 15em; /* LTR */
+  }
+
+  .vertical-tabs ul.vertical-tabs-list {
+    display: block;
+    width: 15em;
+    list-style: none;
+    border-top: 1px solid #ccc;
+    padding: 0;
+    margin: -1px 0 -1px -15em; /* LTR */
+    float: left; /* LTR */
+  }
+
+  fieldset.vertical-tabs-pane > legend {
+    display: none;
+  }
+
+  .vertical-tab-widget {
+    border-width: 0 1px 1px;
+  }
+
+  .vertical-tab-widget.selected {
+    border-width: 0 0 1px 1px; /* LTR */
+  }
+}
+
diff --git a/core/misc/vertical-tabs.js b/core/misc/vertical-tabs.js
index 65e5683..2114cdd 100644
--- a/core/misc/vertical-tabs.js
+++ b/core/misc/vertical-tabs.js
@@ -5,6 +5,14 @@
  * tabs. Another tab pane can be selected by clicking on the respective
  * tab.
  *
+ * To allow the tabbed interface to expand from a single column to two columns
+ * (tabs and panes separate) when screen space is available, this script
+ * generates two tab widgets per pane: one to replace the fieldset legend
+ * ("innerWidget"), and one to exist in an unordered list external to the
+ * fieldsets ("outerWidget"). The necessity of doing this could be obviated
+ * if a method were found to display both layouts with only one of the sets of
+ * tab widgets.
+ *
  * Each tab may have a summary which can be updated by another
  * script. For that to work, each fieldset has an associated
  * 'verticalTabCallback' (with jQuery.data() attached to the fieldset),
@@ -14,39 +22,59 @@
 Drupal.behaviors.verticalTabs = {
   attach: function (context) {
     $(context).find('.vertical-tabs-panes').once('vertical-tabs', function () {
+      // A hidden form element will indicate the ID of a pane that should be
+      // pre-selected, and tab_focus will be set to the corresponding jQuery
+      // object, if it exists, as we loop over the fieldsets.
       var $this = $(this);
       var focusID = $this.find(':hidden.vertical-tabs-active-tab').val();
       var tab_focus;
 
-      // Check if there are some fieldsets that can be converted to vertical-tabs
+      // Stop now if there aren't any fieldsets to be converted to tab panes.
       var $fieldsets = $this.find('> fieldset');
       if ($fieldsets.length == 0) {
         return;
       }
 
-      // Create the tab column.
+      // Prepare a <ul> to contain tabs in a separate column, to avoid needing
+      // to find a way to produce such a column using the <legend>s and CSS.
+      // Since the column will be floated, it needs a clearfixing wrapper.
       var tab_list = $('<ul class="vertical-tabs-list"></ul>');
       $this.wrap('<div class="vertical-tabs clearfix"></div>').before(tab_list);
 
       // Transform each fieldset into a tab.
       $fieldsets.each(function () {
         var $this = $(this);
+
+        // Wrap everything but the <legend> with a separate <div>,
+        // so that it can be hidden by JS while leaving display
+        // of the <legend> under the control of the CSS.
+        $this.find('>:not(legend)').wrapAll('<div class="fieldset-contents"></div>');
+
         var vertical_tab = new Drupal.verticalTab({
           title: $this.find('> legend').text(),
           fieldset: $this
         });
-        tab_list.append(vertical_tab.item);
+        tab_list.append(vertical_tab.outerWidget);
+        $this.find('> legend').replaceWith(vertical_tab.innerWidget);
+
         $this
+          // Prevent collapse.js triggering on this fieldset.
           .removeClass('collapsible collapsed')
           .addClass('vertical-tabs-pane')
+          // Attach the tab object to the fieldset,
+          // so it can be retrieved therefrom.
           .data('verticalTab', vertical_tab);
         if (this.id == focusID) {
           tab_focus = $this;
         }
       });
 
+      // Assign .first and .last markers to the tab widgets,
+      // which will be updated when tabs are hidden and shown.
       $(tab_list).find('> li:first').addClass('first');
       $(tab_list).find('> li:last').addClass('last');
+      $this.find('legend:first').addClass('first');
+      $this.find('legend:last').addClass('last');
 
       if (!tab_focus) {
         // If the current URL has a fragment and one of the tabs contains an
@@ -78,14 +106,14 @@ Drupal.verticalTab = function (settings) {
   var self = this;
   $.extend(this, settings, Drupal.theme('verticalTab', settings));
 
-  this.link.click(function () {
+  this.links.click(function () {
     self.focus();
     return false;
   });
 
   // Keyboard events added:
   // Pressing the Enter key will open the tab pane.
-  this.link.keydown(function(event) {
+  this.links.keydown(function(event) {
     if (event.keyCode == 13) {
       self.focus();
       // Set focus on the first input field of the visible fieldset/tab pane.
@@ -110,40 +138,52 @@ Drupal.verticalTab.prototype = {
       .siblings('fieldset.vertical-tabs-pane')
         .each(function () {
           var tab = $(this).data('verticalTab');
-          tab.fieldset.hide();
-          tab.item.removeClass('selected');
+          tab.fieldset.children('.fieldset-contents').hide();
+          tab.widgets.removeClass('selected');
         })
         .end()
-      .show()
+      .children('.fieldset-contents').show().end()
       .siblings(':hidden.vertical-tabs-active-tab')
         .val(this.fieldset.attr('id'));
-    this.item.addClass('selected');
+    this.widgets.addClass('selected');
     // Mark the active tab for screen readers.
-    $('#active-vertical-tab').remove();
-    this.link.append('<span id="active-vertical-tab" class="element-invisible">' + Drupal.t('(active tab)') + '</span>');
+    $('.active-vertical-tab').remove();
+    this.links.append('<span class="active-vertical-tab element-invisible">' + Drupal.t('(active tab)') + '</span>');
   },
 
   /**
    * Updates the tab's summary.
    */
   updateSummary: function () {
-    this.summary.html(this.fieldset.drupalGetSummary());
+    this.summaries.html(this.fieldset.drupalGetSummary());
+  },
+
+  /**
+   * Update .first and .last markers. We need recurse from parent to retain the
+   * actual DOM element order as jQuery implements sortOrder, but not as public
+   * method.
+   */
+  updateFirstLast: function () {
+    this.outerWidget.parent().children('.vertical-tab-widget')
+      .removeClass('first').filter(':not(.vertical-tab-hidden):first')
+      .addClass('first');
+    this.fieldset.parent().children().children('.vertical-tab-widget')
+      .removeClass('first').filter(':not(.vertical-tab-hidden):first')
+      .addClass('first');
+    this.outerWidget.parent().children('.vertical-tab-widget')
+      .removeClass('last').filter(':not(.vertical-tab-hidden):last')
+      .addClass('last');
+    this.fieldset.parent().children().children('.vertical-tab-widget')
+      .removeClass('last').filter(':not(.vertical-tab-hidden):last')
+      .addClass('last');
   },
 
   /**
    * Shows a vertical tab pane.
    */
   tabShow: function () {
-    // Display the tab.
-    this.item.show();
-    // Update .first marker for items. We need recurse from parent to retain the
-    // actual DOM element order as jQuery implements sortOrder, but not as public
-    // method.
-    this.item.parent().children('.vertical-tab-button').removeClass('first')
-      .filter(':visible:first').addClass('first');
-    // Display the fieldset.
-    this.fieldset.removeClass('vertical-tab-hidden').show();
-    // Focus this tab.
+    this.fieldset.add(this.widgets).removeClass('vertical-tab-hidden');
+    this.updateFirstLast();
     this.focus();
     return this;
   },
@@ -152,15 +192,9 @@ Drupal.verticalTab.prototype = {
    * Hides a vertical tab pane.
    */
   tabHide: function () {
-    // Hide this tab.
-    this.item.hide();
-    // Update .first marker for items. We need recurse from parent to retain the
-    // actual DOM element order as jQuery implements sortOrder, but not as public
-    // method.
-    this.item.parent().children('.vertical-tab-button').removeClass('first')
-      .filter(':visible:first').addClass('first');
-    // Hide the fieldset.
-    this.fieldset.addClass('vertical-tab-hidden').hide();
+    this.fieldset.add(this.widgets).addClass('vertical-tab-hidden');
+    this.updateFirstLast();
+
     // Focus the first visible tab (if there is one).
     var $firstTab = this.fieldset.siblings('.vertical-tabs-pane:not(.vertical-tab-hidden):first');
     if ($firstTab.length) {
@@ -178,19 +212,26 @@ Drupal.verticalTab.prototype = {
  *   - title: The name of the tab.
  * @return
  *   This function has to return an object with at least these keys:
- *   - item: The root tab jQuery element
- *   - link: The anchor tag that acts as the clickable area of the tab
- *       (jQuery version)
- *   - summary: The jQuery element that contains the tab summary
+ *   - innerWidget: the tab widget jQuery element replacing the legend
+ *   - outerWidget: the tab widget jQuery element external to the fieldsets
+ *   - widgets: both of the above, for convenience
+ *   - links: The anchor tags that act as the clickable area of the tab widgets
+ *   - summaries: The jQuery elements that contain the tab summaries
  */
 Drupal.theme.prototype.verticalTab = function (settings) {
   var tab = {};
-  tab.item = $('<li class="vertical-tab-button" tabindex="-1"></li>')
-    .append(tab.link = $('<a href="#"></a>')
-      .append(tab.title = $('<strong></strong>').text(settings.title))
-      .append(tab.summary = $('<span class="summary"></span>')
-    )
-  );
+  var link = $('<a href="#"><strong></strong><span class="summary"></span></a>');
+
+  tab.innerWidget = $('<legend class="vertical-tab-widget" tabindex="-1" />')
+    .append(link);
+  tab.outerWidget = $('<li class="vertical-tab-widget" tabindex="-1" />')
+    .append(link.clone());
+
+  tab.widgets = tab.innerWidget.add(tab.outerWidget);
+  tab.links = tab.widgets.find('a');
+  tab.summaries = tab.widgets.find('.summary');
+  tab.titles = tab.widgets.find('strong').text(settings.title);
+
   return tab;
 };