Replace JS driven Breakpoint component with one using media queries

components/Breakpoint.js

@@ -0,0 +1,28 @@
+import React, { Component } from 'react'
+require('./breakpoints.css')
+
+class Breakpoint extends Component {
+  render () {
+    const { mobile, children } = this.props
+    if (mobile) {
+      return (
+        <div className="breakpoint-min-width-700">
+          {children}
+        </div>
+      )
+    } else {
+      return (
+        <div className="breakpoint-max-width-700">
+          {children}
+        </div>
+      )
+    }
+  }
+}
+
+Breakpoint.propTypes = {
+  children: React.PropTypes.object,
+  mobile: React.PropTypes.bool,
+}
+
+export default Breakpoint

components/breakpoints.css

@@ -0,0 +1,16 @@
+@media only screen and (min-width: 700px) {
+  .breakpoint-min-width-700 {
+    display: block;
+  }
+  .breakpoint-max-width-700 {
+    display: none;
+  }
+}
+@media only screen and (max-width: 700px) {
+  .breakpoint-min-width-700 {
+    display: none;
+  }
+  .breakpoint-max-width-700 {
+    display: block;
+  }
+}

pages/docs/_template.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Link } from 'react-router'
-import { Breakpoint } from 'react-responsive-grid'
+import Breakpoint from 'components/Breakpoint'
 import find from 'lodash/find'
 import { prefixLink } from 'gatsby-helpers'
 import { config } from 'config'
@@ -58,10 +58,11 @@ module.exports = React.createClass({
         </li>
       )
     })
-
     return (
       <div>
-        <Breakpoint minWidth={700}>
+        <Breakpoint
+          mobile
+        >
           <div
             style={{
               overflowY: 'auto',
@@ -90,7 +91,7 @@ module.exports = React.createClass({
             {this.props.children}
           </div>
         </Breakpoint>
-        <Breakpoint maxWidth={700}>
+        <Breakpoint>
           <strong>Topics:</strong>
           {' '}
           <select