title: Semantic-UI-React Responsive component renders element in spite of minWidth/maxWidth prop
body: <p>I have a component where I want to render different components based on screen size. If I reload the page while on mobile view, everything is ok, NavBarMobile is rendered and NavbarDesktop is not. </p>
  
  <p>If I reload the page while on desktop view,  then my NavbarMobile is rendered again instead of NavBarDesktop.</p>
  
  <p>If I start resizing the screen to mobile and back to desktop view, NavBarDesktop is rendered correctly.</p>
  
  <p>So, the problem is first page load while in Desktop view, how to fix that?</p>
  
  <pre><code> const { mainAppComponents, } = this.props
      const { visible, } = this.state
      return (
        &lt;Fragment&gt;
          &lt;Responsive maxWidth={767}&gt;
            &lt;NavBarMobile
              onPusherClick={this.handlePusher}
              onToggle={this.handleToggle}
              rightItems={rightItems}
              visible={visible}
            &gt;
              {mainAppComponents.header}
              {mainAppComponents.routes}
            &lt;/NavBarMobile&gt;
          &lt;/Responsive&gt;
  
          &lt;Responsive minWidth={768}&gt;
            &lt;NavBarDesktop rightItems={rightItems}&gt;{mainAppComponents.header}&lt;/NavBarDesktop&gt;
            {mainAppComponents.routes}
          &lt;/Responsive&gt;
        &lt;/Fragment&gt;
      )
  </code></pre>