diff --git a/core/themes/bartik/css/components/comments.css b/core/themes/bartik/css/components/comments.css
index a80e049..ef8c80a 100644
--- a/core/themes/bartik/css/components/comments.css
+++ b/core/themes/bartik/css/components/comments.css
@@ -21,7 +21,6 @@
[dir="rtl"] .comment {
  direction: rtl;
}
.comment__meta {
  padding: 0 30px 0 0; /* LTR */
  font-size: 1.071em;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.733em;
  line-height: 1.2;
}
.comment__permalink {
  font-size: 0.733em;
  line-height: 1.6;
  word-break: break-all;
}
.comment__content:before {
  content: '';
  position: absolute;
  margin-right: 0;
  padding: 5px 5px 5px 2px;
}
 /**
  * @todo: unpublished nodes have class .node--unpublished.
  * change this to .comment--unpublished.
@@ -155,3 +151,53 @@
[dir="rtl"] .node--unpublished .comment__content:after {
  border-left-color: #fff4f4;
}
+
+@media all and (max-width: 460px) {
+  .comment__content {
+    width: auto;
+    display: block;
+    margin-top: 30px;
+  }
+  .comment__content::before,
+  .comment__content:after {
+    border-top: 0 none;
+    border-left: 20px solid transparent;
+    border-right-color: transparent;
+    top: -20px;
+    right: auto;
+    left: 5px;
+  }
+  [dir="rtl"] .comment__content::before,
+  [dir="rtl"] .comment__content:after {
+    border-left: 20px solid transparent;
+    border-right: 20px solid transparent;
+    top: -20px;
+    left: auto;
+    right: 5px;
+  }
+  .comment__content::before {
+    border-bottom-color: #d3d7d9;
+  }
+  .comment__content:after {
+    border-bottom-color: #fff;
+    margin-top: 1px;
+    margin-right: 0;
+  }
+  article.comment {
+    display: block;
+  }
+  .comment__author,
+  .comment__time,
+  .comment__permalink {
+    display: inline;
+  }
+  .comment__author,
+  .comment__time {
+    margin-right: 5px;
+  }
+  [dir="rtl"] .comment__author,
+  [dir="rtl"] .comment__time {
+    margin-right: 0;
+    margin-left: 5px;
+  }
+}