Fixing some regressions for profile badges

app/assets/stylesheets/common/base/user-badges.scss

@@ -285,6 +285,13 @@
     display: flex;
     align-items: center;
     width: 100%;
+    @media screen and (max-width: 500px) {
+      flex-wrap: wrap;
+    }
+    div:not(.grant-info-item) {
+      display: flex;
+    }
+
     &.hidden {
       display: none;
     }
@@ -292,6 +299,9 @@
   .grant-info-item {
     margin-bottom: 1em;
     color: dark-light-choose($primary-medium, $secondary-medium);
+    &:first-of-type {
+      margin-right: 10px;
+    }
   }
 
   .badge-title .form-horizontal .controls {

app/assets/stylesheets/common/base/user.scss

@@ -384,11 +384,16 @@
 .top-section,
 .top-sub-section {
   margin-bottom: 20px;
+  &.badges-section {
+    display: flex;
+    flex-wrap: wrap;
+  }
 }
 
 .stats-title {
   text-transform: uppercase;
   margin-bottom: 10px;
+  width: 100%;
 }
 
 .stats-section {

app/assets/stylesheets/desktop/components/user-info.scss

@@ -1,7 +1,7 @@
 .user-info {
   &.medium {
     flex: 0 0 32%;
-    margin-right: 2%;
+    margin: 0 2% 4vh 0;
     display: flex;
     &:nth-of-type(3n) {
       margin-right: 0;

app/assets/stylesheets/desktop/user.scss

@@ -75,6 +75,11 @@
   margin-bottom: 10px;
   box-sizing: border-box;
 
+  &.user-badges-list {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
   .btn.right {
     float: right
   }