diff --git a/app/assets/stylesheets/layout/social.scss b/app/assets/stylesheets/layout/social.scss
index 8c78a7acc..a0b980bc0 100644
--- a/app/assets/stylesheets/layout/social.scss
+++ b/app/assets/stylesheets/layout/social.scss
@@ -1,4 +1,10 @@
 .social {
+  @include grid-column;
+  text-align: right;
+
+  @include breakpoint(medium) {
+    width: 1 * 100% / 3;
+  }
 
   li {
     display: inline-block;
diff --git a/app/components/layout/social_component.html.erb b/app/components/layout/social_component.html.erb
index 447a7d3c6..8476e0bcb 100644
--- a/app/components/layout/social_component.html.erb
+++ b/app/components/layout/social_component.html.erb
@@ -1,19 +1,14 @@
-<div class="small-12 medium-4 column social">
-  <div class="text-right">
-    <ul>
-      <% sites.each do |name, url| %>
-        <% if setting["#{name}_handle"] %>
-          <li>
-            <%= link_to "#{url}/#{setting["#{name}_handle"]}", target: "_blank",
-              title: t("shared.go_to_page") + t("social.#{name}", org: setting["org_name"]) + t("shared.target_blank") do %>
-              <span class="show-for-sr"><%= t("social.#{name}", org: setting["org_name"]) %></span>
-              <span class="icon-<%= name %>" aria-hidden="true"></span>
-            <% end %>
-          </li>
+<div class="social">
+  <ul>
+    <% sites.each do |name, url| %>
+      <li>
+        <%= link_to "#{url}/#{setting["#{name}_handle"]}", target: "_blank", title: link_title(name) do %>
+          <span class="show-for-sr"><%= link_text(name) %></span>
+          <span class="icon-<%= name %>" aria-hidden="true"></span>
         <% end %>
-      <% end %>
+      </li>
+    <% end %>
 
-      <%= raw content_block("footer", I18n.locale) %>
-    </ul>
-  </div>
+    <%= raw footer_content_block %>
+  </ul>
 </div>
diff --git a/app/components/layout/social_component.rb b/app/components/layout/social_component.rb
index accd15bc5..1391bd76a 100644
--- a/app/components/layout/social_component.rb
+++ b/app/components/layout/social_component.rb
@@ -10,6 +10,18 @@ class Layout::SocialComponent < ApplicationComponent
         youtube: "https://www.youtube.com",
         telegram: "https://www.telegram.me",
         instragram: "https://www.instagram.com"
-      }
+      }.select { |name, _| setting["#{name}_handle"] }
+    end
+
+    def link_title(site_name)
+      t("shared.go_to_page") + link_text(site_name) + t("shared.target_blank")
+    end
+
+    def link_text(site_name)
+      t("social.#{site_name}", org: setting["org_name"])
+    end
+
+    def footer_content_block
+      content_block("footer", I18n.locale)
     end
 end