title: How to changing layout based on screen size with react
body: <p>I want to be able to change my layout when i hit a given screen size so i can change the way my site looks when it hits a mobile view.</p>
  
  <p>Currently my react site scrolls horizontally using the package <a href="http://hew.github.io/react-scroll-horizontal/" rel="nofollow noreferrer">Horitzontal Scroll Package</a></p>
  
  <p>I've tried implementing this with the react-responsive package which allows me to run media queries but there seems to be a conflict between the two packages.</p>
  
  <p>So i want my site to scroll horizontal when in full screen (Desktop and table) and then scroll top to bottom in mobile view. How would i do this?</p>
  
  <pre><code>class Home extends React.Component{
  constructor(props) {
      super(props);
      this.state = {};
  }
  
  componentWillMount() {
      this.setState({
          home: projectsData.filter( p =&gt; p.name === "homepage" ),
          galleryImages: [
              ImgOne,
              ImgTwo,
              ImgThree,
              ImgFour,
              ImgFive,
              ImgSix
          ]
      });
  }
  
  render(){
  
      const test = { color: "black", position: "fixed" }
      return(
          &lt;div className="row"&gt;
              &lt;Responsive minWidth={992}&gt;
                  &lt;HorizontalScroll reverseScroll={true}&gt;
                      &lt;Header /&gt;
                      &lt;SplashScreen /&gt;
                      &lt;CopyText /&gt;
                  &lt;/HorizontalScroll&gt;
              &lt;/Responsive&gt;
          &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>NOTE: I know that the horizontal-scroll package doesn't support sizing with percentages.</p>