diff --git a/core/includes/form.inc b/core/includes/form.inc
index 9c72685..6cdda46 100644
--- a/core/includes/form.inc
+++ b/core/includes/form.inc
@@ -242,9 +242,22 @@ function template_preprocess_details(&$variables) {
     $variables['summary_attributes']['aria-pressed'] = $variables['summary_attributes']['aria-expanded'];
   }
   $variables['title'] = (!empty($element['#title'])) ? $element['#title'] : '';
-  $variables['description'] = (!empty($element['#description'])) ? $element['#description'] : '';
   $variables['children'] = (isset($element['#children'])) ? $element['#children'] : '';
   $variables['value'] = (isset($element['#value'])) ? $element['#value'] : '';
+
+  $variables['description'] = NULL;
+  if (!empty($element['#description'])) {
+    $variables['description_display'] = $element['#description_display'];
+    $description_attributes = [];
+    if ($element['#description_display'] === 'invisible') {
+      $description_attributes['class'][] = 'visually-hidden';
+    }
+    if (!empty($element['#id'])) {
+      $description_attributes['id'] = $element['#id'] . '--description';
+    }
+    $variables['description']['attributes'] = new Attribute($description_attributes);
+    $variables['description']['content'] = $element['#description'];
+  }
 }
 
 /**
diff --git a/core/lib/Drupal/Core/Form/FormBuilder.php b/core/lib/Drupal/Core/Form/FormBuilder.php
index d16d851..324a53c 100644
--- a/core/lib/Drupal/Core/Form/FormBuilder.php
+++ b/core/lib/Drupal/Core/Form/FormBuilder.php
@@ -683,11 +683,12 @@ public function doBuildForm($form_id, &$element, FormStateInterface &$form_state
       $element['#defaults_loaded'] = TRUE;
     }
     // Assign basic defaults common for all form elements.
+    // NOTE: description_display is below by default, excepted for details.
     $element += array(
       '#required' => FALSE,
       '#attributes' => array(),
       '#title_display' => 'before',
-      '#description_display' => 'after',
+      '#description_display' => (isset($element['#type']) && $element['#type']) ? 'before' : 'after',
       '#errors' => NULL,
     );
 
diff --git a/core/modules/system/templates/details.html.twig b/core/modules/system/templates/details.html.twig
index 42dd4c2..7d9e749 100644
--- a/core/modules/system/templates/details.html.twig
+++ b/core/modules/system/templates/details.html.twig
@@ -7,6 +7,12 @@
  * - attributes: A list of HTML attributes for the details element.
  * - title: (optional) The title of the element, may not be set.
  * - description: (optional) The description of the element, may not be set.
+ * - description_display: (optional) Description display setting. It can have these values:
+ *   - before: The description is output before the element. This is the default
+ *     value.
+ *   - after: The description is output after the element.
+ *   - invisible: The description is output after the element, hidden visually
+ *     but available to screen readers.
  * - children: (optional) The children of the element, may not be set.
  * - value: (optional) The value of the element, may not be set.
  *
@@ -19,15 +25,22 @@
   {%- if title -%}
     <summary{{ summary_attributes }}>{{ title }}</summary>
   {%- endif -%}
-  <div>
-    {%- if description -%}
-      <div>{{ description }}</div>
-    {%- endif -%}
+  <div class="details-wrapper">
+    {% if description_display == 'before' and description.content %}
+      <div{{ description.attributes }}>
+        {{ description.content }}
+      </div>
+    {% endif %}
     {%- if children -%}
       {{ children }}
     {%- endif -%}
     {%- if value -%}
       {{ value }}
     {%- endif -%}
+    {% if description_display in ['after', 'invisible'] and description.content %}
+      <div{{ description.attributes.addClass(description_classes) }}>
+        {{ description.content }}
+      </div>
+    {% endif %}
   </div>
 </details>
diff --git a/core/themes/classy/templates/system/details.html.twig b/core/themes/classy/templates/system/details.html.twig
index 17ea820..7d9e749 100644
--- a/core/themes/classy/templates/system/details.html.twig
+++ b/core/themes/classy/templates/system/details.html.twig
@@ -7,6 +7,12 @@
  * - attributes: A list of HTML attributes for the details element.
  * - title: (optional) The title of the element, may not be set.
  * - description: (optional) The description of the element, may not be set.
+ * - description_display: (optional) Description display setting. It can have these values:
+ *   - before: The description is output before the element. This is the default
+ *     value.
+ *   - after: The description is output after the element.
+ *   - invisible: The description is output after the element, hidden visually
+ *     but available to screen readers.
  * - children: (optional) The children of the element, may not be set.
  * - value: (optional) The value of the element, may not be set.
  *
@@ -20,14 +26,21 @@
     <summary{{ summary_attributes }}>{{ title }}</summary>
   {%- endif -%}
   <div class="details-wrapper">
-    {%- if description -%}
-      <div class="details-description">{{ description }}</div>
-    {%- endif -%}
+    {% if description_display == 'before' and description.content %}
+      <div{{ description.attributes }}>
+        {{ description.content }}
+      </div>
+    {% endif %}
     {%- if children -%}
       {{ children }}
     {%- endif -%}
     {%- if value -%}
       {{ value }}
     {%- endif -%}
+    {% if description_display in ['after', 'invisible'] and description.content %}
+      <div{{ description.attributes.addClass(description_classes) }}>
+        {{ description.content }}
+      </div>
+    {% endif %}
   </div>
 </details>