diff --git a/_includes/nav.html b/_includes/nav.html
index c77c468..485ded3 100644
--- a/_includes/nav.html
+++ b/_includes/nav.html
@@ -2,8 +2,8 @@
 
 <div class="{% unless homepage %}border-bottom{% endunless %}">
   <div class="container-lg px-3">
-    <div class="py-4 d-flex d-flex-row">
-      <h1 class="alt-h4 col-4 lh-default v-align-middle">
+    <div class="py-4 d-sm-flex flex-sm-row">
+      <h1 class="alt-h4 col-sm-4 lh-default v-align-middle">
         {% unless homepage %}
         <a href="/" class="no-underline text-uppercase text-brand-blue-dark">
           <img class="v-align-middle" style="margin: -20px 8px -8px 0;" src="/assets/probot-head.png" height="36" alt="">
@@ -11,7 +11,7 @@
         </a>
         {% endunless %}
       </h1>
-      <nav class="text-bold col-8 text-right">
+      <nav class="text-bold col-sm-8 text-sm-right">
         <a class="text-inherit px-2 d-inline-block" href="/#explore">Explore</a>
         <a class="text-inherit px-2 d-inline-block" href="/docs/">Build</a>
         <a class="text-inherit px-2 d-inline-block" href="https://github.com/probot/probot">Contribute</a>
diff --git a/_layouts/default.html b/_layouts/default.html
index 657f13e..8848a37 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="/assets/css/index.css?d={{ site.time | date: '%s' }}">
     <link rel="stylesheet" href="/assets/css/syntax.css?d={{ site.time | date: '%s' }}">
     {% seo %}
diff --git a/_layouts/docs.html b/_layouts/docs.html
index 5307499..fdbc540 100644
--- a/_layouts/docs.html
+++ b/_layouts/docs.html
@@ -3,38 +3,8 @@ layout: default
 ---
 
 <div class="container-lg px-3 py-6">
-  <div class="d-flex flex-row gutter-spacious">
-    <div id="toc" class="col-3 py-6">
-      {% for section in site.data.toc %}
-        <h2 class="alt-h4">{{ section[0] }}</h2>
-
-        <ul class="mt-2 mb-4 list-style-none">
-          {% for item in section[1] %}
-            <li>
-              {% if item.url %}
-                {% assign link = item %}
-              {% else %}
-                {% for doc in site.pages %}
-                  {% if doc.path == item %}
-                    {% assign link = doc %}
-                    {% break %}
-                  {% endif %}
-                {% endfor %}
-              {% endif %}
-
-              {% if page.url == link.url %}
-                {% assign classes = "text-brand-red" %}
-              {% else %}
-                {% assign classes = "text-gray-light" %}
-              {% endif %}
-
-              <a class="d-block no-underline py-1 {{classes}}" href="{{ link.url }}">{{ link.title }}</a>
-            </li>
-          {% endfor %}
-        </ul>
-      {% endfor %}
-    </div>
-    <div class="col-9 markdown-body p-6">
+  <div class="d-md-flex flex-md-row flex-md-row-reverse gutter-md-spacious">
+    <div class="col-md-9 markdown-body p-md-6">
       {{ content }}
 
       {% for doc in site.pages %}
@@ -67,5 +37,35 @@ layout: default
         <a href="https://github.com/{{ site.github.repository_nwo }}/edit/{{ site.branch }}/{{ page.path }}">Suggest changes on GitHub</a>
       </p>
     </div>
+    <div id="toc" class="col-md-3 py-6">
+      {% for section in site.data.toc %}
+        <h2 class="alt-h4">{{ section[0] }}</h2>
+
+        <ul class="mt-2 mb-4 list-style-none">
+          {% for item in section[1] %}
+            <li>
+              {% if item.url %}
+                {% assign link = item %}
+              {% else %}
+                {% for doc in site.pages %}
+                  {% if doc.path == item %}
+                    {% assign link = doc %}
+                    {% break %}
+                  {% endif %}
+                {% endfor %}
+              {% endif %}
+
+              {% if page.url == link.url %}
+                {% assign classes = "text-brand-red" %}
+              {% else %}
+                {% assign classes = "text-gray-light" %}
+              {% endif %}
+
+              <a class="d-block no-underline py-1 {{classes}}" href="{{ link.url }}">{{ link.title }}</a>
+            </li>
+          {% endfor %}
+        </ul>
+      {% endfor %}
+    </div>
   </div>
 </div>
diff --git a/index.html b/index.html
index 571e77d..9fb2c98 100644
--- a/index.html
+++ b/index.html
@@ -1,27 +1,26 @@
 ---
 layout: default
 ---
-<div class="">
-  <div class="container-lg px-3">
-    <header class="py-6">
-      <div class="pb-0 pt-md-4 py-lg-6">
-        <div class="d-flex flex-items-center flex-justify-center gutter-spacious">
-          <div class="col-3 offset-1 text-right">
-            <img src="/assets/logo.png">
-          </div>
-          <div class="flex-column col-8">
-            <h1 class="alt-h2 text-uppercase lh-condensed text-brand-blue">Probot</h1>
-            <h2 class="alt-h2 lh-condensed">
-              GitHub Apps to automate <br>and improve your workflow
-            </h2>
-            <p class="alt-lead text-gray-light mt-2 lh-condensed" style="opacity: 0.6">
-              Use one of the pre-built open source apps that extend GitHub, or easily build and share your own.
-            </p>
-          </div>
+<div class="container-lg px-3">
+  <header class="py-6">
+    <div class="pb-0 pt-md-4 py-lg-6">
+      <div class="d-md-flex flex-md-items-center flex-md-row-reverse flex-md-justify-center gutter-md-spacious">
+        <div class="col-md-8 text-center text-md-left">
+          <h1 class="alt-h2 text-uppercase lh-condensed text-brand-blue">Probot</h1>
+          <h2 class="alt-h2 lh-condensed">
+            GitHub Apps to automate <br>and improve your workflow
+          </h2>
+          <p class="alt-lead text-gray-light mt-2 lh-condensed" style="opacity: 0.6">
+            Use the pre-built apps to extend GitHub,<br>
+            and easily build and share your own.
+          </p>
+        </div>
+        <div class="col-3 mx-auto mx-md-0 offset-md-1 text-center text-md-right">
+          <img src="/assets/logo.png" class="width-fit">
         </div>
       </div>
-    </header>
-  </div>
+    </div>
+  </header>
 </div>
 
 <div id="explore" class="bg-gray-light border-top border-gray-light">
@@ -75,10 +74,10 @@ layout: default
     </p>
 
     <div class="page-section d-flex flex-column flex-md-row gutter flex-items-center flex-md-items-center">
-      <div class="col-6 d-flex flex-column">
+      <div class="col-md-6 hide-md">
           <img src="https://assets-cdn.github.com/images/modules/site/home-illo-conversation.svg" class="d-block width-fit mx-6">
       </div>
-      <div class="col-6">
+      <div class="col-md-6">
         <h3 class="alt-h3 mb-2">Optimized for GitHub</h3>
         <p class="">
           Receive webhooks and use the authenticated client to access the GitHub API. Granular permissions give each app access only to the data it needs and nothing more.
@@ -87,12 +86,12 @@ layout: default
     </div>
 
     <div class="page-section">
-      <div class="d-flex flex-md-row gutter flex-items-center flex-md-items-center">
-        <div class="col-6">
+      <div class="d-md-flex flex-md-row gutter-md flex-md-items-center">
+        <div class="col-md-6">
           <h3 class="alt-h3 mb-2">Easily scriptable</h3>
           <p class="">Focus on what you want to build. A simple API—built on the latest ES6 JavaScript features—hides the details you don't care about.</p>
         </div>
-        <div class="col-6">
+        <div class="col-md-6">
           <div class="rounded-2 overflow-hidden border" style="margin-left: 60px;">
 {% highlight javascript %}
 module.exports = robot => {
@@ -108,16 +107,8 @@ module.exports = robot => {
         </div>
       </div>
 
-      <div class="d-flex flex-md-row gutter mt-4">
-        <div class="col-6">
-          <h2 class="alt-h3 mb-2"></h2>
-          <p>Apps are first class actors within GitHub.</p>
-          <p class="mt-3">
-            <a href="/docs/">Get started with Probot {% octicon chevron-right %}</a>
-          </p>
-        </div>
-
-        <div class="col-6">
+      <div class="d-md-flex flex-md-row flex-md-row-reverse gutter mt-4">
+        <div class="col-md-6">
           <img src="https://github.com/probot.png" height="44" width="44" class="avatar rounded-1 float-left">
           <div class="timeline-comment box rounded-2 border bg-white" style="margin-left: 60px;">
             <div class="bg-gray px-3 py-2 border-bottom">
@@ -126,6 +117,13 @@ module.exports = robot => {
             <p class="m-0 p-3">Hello World!</p>
           </div>
         </div>
+        <div class="col-md-6">
+          <h2 class="alt-h3 mb-2"></h2>
+          <p>Apps are first class actors within GitHub.</p>
+          <p class="mt-3">
+            <a href="/docs/">Get started with Probot {% octicon chevron-right %}</a>
+          </p>
+        </div>
       </div>
     </div>
   </div>
