diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 7abaee6e2..7c3300fa3 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -374,6 +374,24 @@ header {
 
   ul {
     margin-bottom: 0;
+
+    li {
+      display: block;
+    }
+
+    @include breakpoint(medium) {
+      li {
+        display: inline-block;
+
+        &:after {
+          content: "|";
+        }
+
+        &:last-child:after {
+          content: none;
+        }
+      }
+    }
   }
 }
 
diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb
index 6de8ed89e..223f173b2 100644
--- a/app/views/layouts/_header.html.erb
+++ b/app/views/layouts/_header.html.erb
@@ -1,6 +1,13 @@
 <header>
 
-  <%= render "shared/top_links" %>
+  <div class="top-links">
+    <div class="row">
+      <%= render "shared/locale_switcher" %>
+      <div class="hide-for-small-only">
+        <%= render "shared/top_links" %>
+      </div>
+    </div>
+  </div>
 
   <div class="row">
     <div class="top-bar">
@@ -29,6 +36,9 @@
           <div class="show-for-small-only">
             <div class="subnavigation row">
               <%= render "shared/subnavigation" %>
+              <div class="small-12 column">
+                <%= render "shared/top_links" %>
+              </div>
             </div>
           </div>
         </div>
diff --git a/app/views/shared/_top_links.html.erb b/app/views/shared/_top_links.html.erb
index f57deeebd..b6b738aca 100644
--- a/app/views/shared/_top_links.html.erb
+++ b/app/views/shared/_top_links.html.erb
@@ -1,34 +1,27 @@
-<div class="top-links hide-for-small-only">
-  <div class="row">
-    <%= render "shared/locale_switcher" %>
-    <ul class="no-bullet external-links">
-      <li class="inline-block">
-        <%= link_to t("layouts.header.more_information"),
-                    page_path('more_information'),
-                    class: ("selected" if current_page?("/more_information")),
-                    accesskey: "i"  %>
-                    &nbsp;|
-      </li>
-      <li class="inline-block">
-        <%= link_to t("layouts.header.external_link_transparency"),
-                    t("layouts.header.external_link_transparency_url"),
-                    target: "_blank",
-                    title: t('shared.target_blank_html') %>
-                    &nbsp;|
-      </li>
-      <li class="inline-block">
-        <%= link_to t("layouts.header.external_link_opendata"),
-                    t("layouts.header.external_link_opendata_url"),
-                    target: "_blank",
-                    title: t('shared.target_blank_html') %>
-      </li>
-      <% if setting['blog_url'] %>
-        <li class="inline-block">|&nbsp;
-          <%= link_to setting['blog_url'], title: t('shared.target_blank_html'), target: "_blank" do %>
-            <%= t("layouts.header.external_link_blog") %>
-          <% end %>
-        </li>
+<ul class="no-bullet external-links">
+  <li>
+    <%= link_to t("layouts.header.more_information"),
+                page_path('more_information'),
+                class: ("selected" if current_page?("/more_information")),
+                accesskey: "i"  %>
+  </li>
+  <li>
+    <%= link_to t("layouts.header.external_link_transparency"),
+                t("layouts.header.external_link_transparency_url"),
+                target: "_blank",
+                title: t('shared.target_blank_html') %>
+  </li>
+  <li>
+    <%= link_to t("layouts.header.external_link_opendata"),
+                t("layouts.header.external_link_opendata_url"),
+                target: "_blank",
+                title: t('shared.target_blank_html') %>
+  </li>
+  <% if setting['blog_url'] %>
+    <li>
+      <%= link_to setting['blog_url'], title: t('shared.target_blank_html'), target: "_blank" do %>
+        <%= t("layouts.header.external_link_blog") %>
       <% end %>
-    </ul>
-  </div>
-</div>
+    </li>
+  <% end %>
+</ul>