diff --git a/app/assets/stylesheets/common/base/groups.scss b/app/assets/stylesheets/common/base/groups.scss
index 242d3077ddb..3689277fe65 100644
--- a/app/assets/stylesheets/common/base/groups.scss
+++ b/app/assets/stylesheets/common/base/groups.scss
@@ -40,7 +40,7 @@
       grid-template-columns: repeat(3, 32%);
       grid-column-gap: 2%;
     }
-    @include breakpoint("mobile") {
+    @include breakpoint("mobile-large") {
       grid-template-columns: 100%;
     }
   }
@@ -49,7 +49,7 @@
     // Flex and margin are for IE11
     flex: 1 1 24%;
     margin: 1%;
-    @include breakpoint("mobile") {
+    @include breakpoint("mobile-large") {
       margin: 0;
     }
     display: flex;
diff --git a/app/assets/stylesheets/common/base/reviewables.scss b/app/assets/stylesheets/common/base/reviewables.scss
index ba89457c853..018ea923b87 100644
--- a/app/assets/stylesheets/common/base/reviewables.scss
+++ b/app/assets/stylesheets/common/base/reviewables.scss
@@ -327,7 +327,7 @@
       &:not(:empty) {
         padding: 0.5em 1em 0.5em 0;
       }
-      @include breakpoint("mobile") {
+      @include breakpoint("mobile-large") {
         overflow: hidden;
         text-overflow: ellipsis;
         padding-right: 0.5em;
@@ -370,7 +370,7 @@
   .created-by {
     margin-right: 1em;
     padding-top: 0.35em;
-    @include breakpoint("mobile") {
+    @include breakpoint("mobile-large") {
       float: left;
       margin-bottom: 1em;
     }
@@ -385,7 +385,7 @@
     margin-top: 1em;
     min-width: 275px;
     word-break: break-word;
-    @include breakpoint("mobile", min-width) {
+    @include breakpoint("mobile-large", min-width) {
       display: flex;
     }
   }
@@ -495,7 +495,7 @@
   }
 }
 
-@include breakpoint("mobile") {
+@include breakpoint("mobile-large") {
   tr.reviewable-score {
     grid-template-columns: auto auto auto;
   }