diff --git a/core/modules/comment/templates/comment.html.twig b/core/modules/comment/templates/comment.html.twig
index 3a7d19b..e8b0e1f 100644
--- a/core/modules/comment/templates/comment.html.twig
+++ b/core/modules/comment/templates/comment.html.twig
@@ -67,43 +67,36 @@
 #}
 
 <article{{ attributes }}>
-  {% if title %}
-    {{ title_prefix }}
-  {% endif %}
-
   {#
-  Hide the "new" indicator by default, let a piece of JavaScript ask
-  the server which comments are new for the user. Rendering the final
-  "new" indicator here would break the render cache.
+    Hide the "new" indicator by default, let a piece of JavaScript ask the
+    server which comments are new for the user. Rendering the final "new"
+    indicator here would break the render cache.
   #}
   <mark class="hidden" data-comment-timestamp="{{ new_indicator_timestamp }}"></mark>
 
-  {% if title %}
-    <h3{{ title_attributes }}>{{ title }}</h3>
-    {{ title_suffix }}
-  {% endif %}
-
-
-  <footer>
+  <header>
     {{ user_picture }}
     <p>{{ submitted }}</p>
 
     {#
-      Indicate the semantic relationship between parent and child comments
-      for accessibility. The list is difficult to navigate in a screen
-      reader without this information.
+      Indicate the semantic relationship between parent and child comments for
+      accessibility. The list is difficult to navigate in a screen reader
+      without this information.
     #}
     {% if parent %}
       <p class="visually-hidden">{{ parent }}</p>
     {% endif %}
 
     {{ permalink }}
-  </footer>
+  </header>
 
   <div{{ content_attributes }}>
-    {{ content|without('links') }}
+    {% if title %}
+      {{ title_prefix }}
+      <h3{{ title_attributes }}>{{ title }}</h3>
+      {{ title_suffix }}
+    {% endif %}
+    {{ content }}
   </div>
-  {% if content.links %}
-    {{ content.links }}
-  {% endif %}
+
 </article>
diff --git a/core/themes/bartik/css/components/comments.css b/core/themes/bartik/css/components/comments.css
index 9f22c51..1bf7a9f 100644
--- a/core/themes/bartik/css/components/comments.css
+++ b/core/themes/bartik/css/components/comments.css
@@ -12,14 +12,14 @@
   display: table;
   vertical-align: top;
 }
-.comment__attribution {
-  display: table-cell;
+[dir="rtl"] .comment {
+  direction: rtl;
+}
+.comment header {
   padding: 0 30px 0 0; /* LTR */
-  vertical-align: top;
   overflow: hidden;
 }
-[dir="rtl"] .comment__attribution {
-  float: right;
+[dir="rtl"] .comment header {
   padding: 0 0 0 30px;
 }
 .comment__attribution img {
@@ -48,8 +48,6 @@
 .comment__content {
   font-size: 0.929em;
   line-height: 1.6;
-}
-.comment__text {
   padding: 10px 25px;
   border: 1px solid #d3d7d9;
   display: table-cell;
@@ -57,7 +55,11 @@
   position: relative;
   width: 100%;
 }
-.comment__text:before {
+.comment__content h3 {
+  /*line-height: 1.7;*/
+  margin-top: 0;
+}
+.comment__content:before {
   content: '';
   position: absolute;
   right: 100%; /* LTR */
@@ -66,13 +68,13 @@
   border-right: 20px solid #d3d7d9; /* LTR */
   border-bottom: 20px solid transparent;
 }
-[dir="rtl"] .comment__text:before {
+[dir="rtl"] .comment__content:before {
   right: auto;
   left: 100%;
   border-right: none;
   border-left: 20px solid #d3d7d9;
 }
-.comment__text:after {
+.comment__content:after {
   content: '';
   position: absolute;
   right: 100%; /* LTR */
@@ -82,7 +84,7 @@
   border-bottom: 20px solid transparent;
   margin-right: -1px; /* LTR */
 }
-[dir="rtl"] .comment__text:after {
+[dir="rtl"] .comment__content:after {
   right: auto;
   left: 100%;
   border-right: none;
@@ -97,7 +99,8 @@
   margin-right: 40px;
   margin-left: 0;
 }
-.comment ul.links {
+.comment ul.links,
+[dir="rtl"] .comment ul.links {
   padding: 0 0 0.25em 0;
 }
 .comment ul.links li {
@@ -116,14 +119,11 @@
   margin-right: 0;
   padding: 5px 5px 5px 2px;
 }
-.comment-footer {
-  display: table-row;
-}
-.comment--unpublished .comment__text:after,
-.node--unpublished .comment__text:after {
+.comment--unpublished .comment__content:after,
+.node--unpublished .comment__content:after {
   border-right-color: #fff4f4; /* LTR */
 }
-[dir="rtl"] .comment--unpublished .comment__text:after,
-[dir="rtl"] .node--unpublished .comment__text:after {
+[dir="rtl"] .comment--unpublished .comment__content:after,
+[dir="rtl"] .node--unpublished .comment__content:after {
   border-left-color: #fff4f4;
 }
diff --git a/core/themes/bartik/templates/comment.html.twig b/core/themes/bartik/templates/comment.html.twig
index 21cca3c..fe996cb 100644
--- a/core/themes/bartik/templates/comment.html.twig
+++ b/core/themes/bartik/templates/comment.html.twig
@@ -73,43 +73,37 @@
   ]
 %}
 <article role="article"{{ attributes.addClass(classes)|without('role') }}>
-  <header class="comment-header">
-    <div class="comment__attribution">
-      {{ user_picture }}
-      <div class="comment__submitted">
-        <p class="comment__author comment__submitted__data">{{ author }}</p>
-        <p class="comment__time comment__submitted__data">{{ created }}</p>
-        <p class="comment__permalink comment__submitted__data">{{ permalink }}</p>
-        {#
-          // Indicate the semantic relationship between parent and child comments
-          // for accessibility. The list is difficult to navigate in a screen
-          // reader without this information.
-        #}
-        {% if parent %}
-          <p class="visually-hidden">{{ parent }}</p>
-        {% endif %}
-      </div>
-    </div>
-  </header>
-  <div class="comment__text">
+  {#
+    Hide the "new" indicator by default, let a piece of JavaScript ask the
+    server which comments are new for the user. Rendering the final "new"
+    indicator here would break the render cache.
+  #}
+  <span class="hidden new" data-comment-timestamp="{{ new_indicator_timestamp }}"></span>
+
+  <header>
+    {{ user_picture }}
+    <p class="comment__author comment__submitted__data">{{ author }}</p>
+    <p class="comment__time comment__submitted__data">{{ created }}</p>
+    <p class="comment__permalink comment__submitted__data">{{ permalink }}</p>
     {#
-    Hide the "new" indicator by default, let a piece of JavaScript ask
-    the server which comments are new for the user. Rendering the final
-    "new" indicator here would break the render cache.
+      Indicate the semantic relationship between parent and child comments
+      for accessibility. The list is difficult to navigate in a screen
+      reader without this information.
     #}
-    <span class="hidden new" data-comment-timestamp="{{ new_indicator_timestamp }}"></span>
+    {% if parent %}
+      <p class="visually-hidden">{{ parent }}</p>
+    {% endif %}
+  </header>
+
+  <div{{ content_attributes.addClass('comment__content') }}>
     {% if title %}
       {{ title_prefix }}
-        <h3{{ title_attributes }}>{{ title }}</h3>
+      <h3{{ title_attributes }}>{{ title }}</h3>
       {{ title_suffix }}
     {% endif %}
-    <div{{ content_attributes.addClass('comment__content') }}>
-      {{ content|without('links') }}
-    </div>
-    <footer class="comment__footer">
-      {% if content.links %}
-        <nav>{{ content.links }}</nav>
-      {% endif %}
-    </footer>
+    {{ content|without('links') }}
+    {% if content.links %}
+      <nav>{{ content.links }}</nav>
+    {% endif %}
   </div>
 </article>
diff --git a/core/themes/classy/templates/content/comment.html.twig b/core/themes/classy/templates/content/comment.html.twig
index 1d56d08..3dc5a2b 100644
--- a/core/themes/classy/templates/content/comment.html.twig
+++ b/core/themes/classy/templates/content/comment.html.twig
@@ -73,43 +73,36 @@
   ]
 %}
 <article{{ attributes.addClass(classes) }}>
-  {% if title %}
-    {{ title_prefix }}
-  {% endif %}
-
   {#
-  Hide the "new" indicator by default, let a piece of JavaScript ask
-  the server which comments are new for the user. Rendering the final
-  "new" indicator here would break the render cache.
+    Hide the "new" indicator by default, let a piece of JavaScript ask the
+    server which comments are new for the user. Rendering the final "new"
+    indicator here would break the render cache.
   #}
   <mark class="hidden" data-comment-timestamp="{{ new_indicator_timestamp }}"></mark>
 
-  {% if title %}
-    <h3{{ title_attributes }}>{{ title }}</h3>
-    {{ title_suffix }}
-  {% endif %}
-
-
-  <footer>
+  <header>
     {{ user_picture }}
     <p class="submitted">{{ submitted }}</p>
 
     {#
-      Indicate the semantic relationship between parent and child comments
-      for accessibility. The list is difficult to navigate in a screen
-      reader without this information.
+      Indicate the semantic relationship between parent and child comments for
+      accessibility. The list is difficult to navigate in a screen reader
+      without this information.
     #}
     {% if parent %}
       <p class="parent visually-hidden">{{ parent }}</p>
     {% endif %}
 
     {{ permalink }}
-  </footer>
+  </header>
 
   <div{{ content_attributes.addClass('content') }}>
-    {{ content|without('links') }}
+    {% if title %}
+      {{ title_prefix }}
+      <h3{{ title_attributes }}>{{ title }}</h3>
+      {{ title_suffix }}
+    {% endif %}
+    {{ content }}
   </div>
-  {% if content.links %}
-    {{ content.links }}
-  {% endif %}
+
 </article>
