title: Render component in different order depending on screen-size (React)
body: <p>I'm trying to work out how I would render a component differently in mobile view (I would like it to appear before my header in mobile, but after otherwise)</p>
  
  <p>The code I have at the minute is</p>
  
  <pre><code>import React from 'react';
  import NavigationBar from './NavigationBar';
  import SiteHeader from './SiteHeader';
  
  export default class App extends Component {
  
    constructor(props) {
       super(props);
       let width = window.innerWidth;
       if (width &gt; 768) {
         this.setState(renderComponent =
           `&lt;div className="container"&gt;
             &lt;NavigationBar /&gt;
             &lt;SiteHeader /&gt;
             {this.props.children}
           &lt;/div&gt;`
         );
       } else {
         this.setState(renderComponent =
           `&lt;div className="container"&gt;
             &lt;NavigationBar /&gt;
             &lt;SiteHeader /&gt;
             {this.props.children}
           &lt;/div&gt;`
         );
       }
     }
  
    render() {
  
      return (
        {renderComponent}
      );
    }
  
  }
  </code></pre>
  
  <p>However this is not working (Component is not defined), I figured I couldn't just set the component as strings but hopefully this is enough info for any suggestions on the correct way to do it</p>
  
  <p>Thanks!</p>