diff --git a/layout/common/footer.ejs b/layout/common/footer.ejs
index 634571c..2f77136 100644
--- a/layout/common/footer.ejs
+++ b/layout/common/footer.ejs
@@ -1,7 +1,7 @@
 <footer class="footer">
     <div class="container">
         <div class="level">
-            <div class="level-start">
+            <div class="level-start has-text-centered-mobile">
                 <a class="footer-logo is-block has-mb-6" href="<%- url_for('/') %>">
                 <% if (has_config('logo.text') && get_config('logo.text')) { %>
                     <%= get_config('logo.text') %>
@@ -17,7 +17,7 @@
             </div>
             <div class="level-end">
             <% if (has_config('footer.links')) { %>
-                <div class="field has-addons">
+                <div class="field has-addons is-flex-center-mobile has-mt-5-mobile">
                 <% let links = get_config('footer.links'); %>
                 <% for (let name in links) {
                         let link = links[name]; %>
diff --git a/layout/common/widget.ejs b/layout/common/widget.ejs
index 6eb5d0c..4e18996 100644
--- a/layout/common/widget.ejs
+++ b/layout/common/widget.ejs
@@ -1,7 +1,29 @@
 <% if (get_widgets(position).length) { %>
-<div class="column is-4-tablet is-4-desktop is-3-widescreen is-hidden-mobile  <%= column_count() === 3 && position === 'right' ? 'is-hidden-tablet-only is-hidden-desktop-only' : '' %>">
+<% function side_column_class() {
+    switch (column_count()) {
+        case 2:
+            return 'is-4-tablet is-4-desktop is-4-widescreen';
+        case 3:
+            return 'is-4-tablet is-4-desktop is-3-widescreen';
+    }
+    return '';
+} %>
+<% function visibility_class() {
+    if (column_count() === 3 && position === 'right') {
+        return 'is-hidden-touch is-hidden-desktop-only';
+    }
+    return '';
+} %>
+<div class="column <%= position === 'left' ? 'has-order-1' : 'has-order-3' %> <%= side_column_class() %> <%= visibility_class() %>">
     <% get_widgets(position).forEach(widget => {%>
         <%- partial('widget/' + widget.type, { widget, post: page }) %>
     <% }) %>
+    <% if (position === 'left') { %>
+        <div class="card card-transparent is-hidden-widescreen">
+        <% get_widgets('right').forEach(widget => {%>
+            <%- partial('widget/' + widget.type, { widget, post: page }) %>
+        <% }) %>
+        </div>
+    <% } %>
 </div>
 <% } %>
\ No newline at end of file
diff --git a/layout/layout.ejs b/layout/layout.ejs
index f13f719..03ebe4c 100644
--- a/layout/layout.ejs
+++ b/layout/layout.ejs
@@ -5,11 +5,22 @@
 </head>
 <body class="is-<%= column_count() %>-column">
     <%- partial('common/navbar', { page }) %>
+    <% function main_column_class() {
+        switch (column_count()) {
+            case 1:
+                return 'is-12';
+            case 2:
+                return 'is-8-tablet is-8-desktop is-8-widescreen';
+            case 3:
+                return 'is-8-tablet is-8-desktop is-6-widescreen'
+        }
+        return '';
+    } %>
     <section class="section">
         <div class="container">
             <div class="columns main">
+                <div class="column <%= main_column_class() %> has-order-2"><%- body %></div>
                 <%- partial('common/widget', { position: 'left' }) %>
-                <div class="column <%= column_count() > 1 ? 'is-8-tablet is-8-desktop is-6-widescreen' : '' %>"><%- body %></div>
                 <%- partial('common/widget', { position: 'right' }) %>
             </div>
         </div>
diff --git a/layout/widget/profile.ejs b/layout/widget/profile.ejs
index bb98723..e18cefc 100644
--- a/layout/widget/profile.ejs
+++ b/layout/widget/profile.ejs
@@ -26,9 +26,9 @@
                     </p>
                     <% } %>
                     <% if (get_config_from_obj(widget, 'location')) { %>
-                    <p class="level is-mobile is-size-6 has-text-grey">
-                        <i class="level-item material-icons is-size-5 has-mr-7">location_on</i>
-                        <span class="level-item"><%= get_config_from_obj(widget, 'location') %></span>
+                    <p class="is-size-6 is-flex is-flex-center has-text-grey">
+                        <i class="material-icons is-size-5 has-mr-7">location_on</i>
+                        <span><%= get_config_from_obj(widget, 'location') %></span>
                     </p>
                     <% } %>
                 </div>
diff --git a/source/css/style.styl b/source/css/style.styl
index 6da7c56..1fbf3bf 100644
--- a/source/css/style.styl
+++ b/source/css/style.styl
@@ -9,8 +9,6 @@ html
 
 body
     font-family: family-serif
-
-body
     background-color: #f7f7f7
 
 @media screen and (min-width: 1280px)
@@ -26,6 +24,10 @@ body
         max-width: 960px
         width: 960px
 
+@media screen and (max-width: 768px)
+    .section
+        padding: 1.5rem 1rem;
+
 .card
     overflow: hidden
     border-radius: 4px
@@ -38,6 +40,11 @@ body
         box-shadow: none
         background: transparent
 
+img.thumbnail
+    object-fit: cover
+    width: 100%
+    height: 100%
+
 .navbar-logo,
 .footer-logo
     img
@@ -176,6 +183,18 @@ body
 .is-flex-wrap
     flex-wrap: wrap !important
 
+.is-flex-center
+    justify-content: center !important
+
+.has-order-1
+    order: 1
+
+.has-order-2
+    order: 2
+
+.has-order-3
+    order: 3
+
 .has-mr-6
     margin-right: 0.5em !important
 
@@ -197,10 +216,13 @@ body
 .has-link-black-ter
     color: hsl(0, 0%, 14%) !important
 
-img.thumbnail
-    object-fit: cover
-    width: 100%
-    height: 100%
+@media screen and (max-width: 768px)
+    .has-text-centered-mobile
+        text-align: center !important
+    .is-flex-center-mobile
+        justify-content: center !important
+    .has-mt-5-mobile
+        margin-top: 1em !important
 
 /* ---------------------------------
  *    Material Icons Anti-aliasing
