title: Rearrange react components on resize
body: <p>Is this even possible(title)? I need it, because in css @media rule needs to change some element's css. CSS part works. Problem occurs because it needed to be followed by rearranging react components. I have these conditions whom(both of them), pass. It should be, when window resizes, css get applied and after getting window width, components get rearranged following css change.
  I have this in constructor:</p>
  
  <pre><code>this.myInput = React.createRef();
  </code></pre>
  
  <p>and this:</p>
  
  <pre><code>componentDidMount () {
          this.setState({
              myWidth: this.state.myWidth=this.myInput.current.offsetWidth
          });
      }
  </code></pre>
  
  <p>and this in Render():</p>
  
  <pre><code>render(){
  
      const btnText = this.state.erase ? "Populate" : "Erase" ;
      const handleClick = e =&gt; this.fullScreen(e.target.id);
  
      const EditorHead1 = &lt;EditorHead id={"item1"} style={this.state.stilEditor} className={this.state.headEdKlasa} onClick={handleClick} title={this.state.attr}/&gt;;
      const PreviewHead1 = &lt;PreviewHead id={"item2"} style={this.state.stilPreview} className={this.state.headViewKlasa} onClick={handleClick} title={this.state.attr}/&gt;;
      const BtnEraser1 = &lt;BtnEraser id={"eraser"} onClick={this.eraseFields} type={"button"} className={"btn btn-danger btn-lg"} title={"Erase &amp; populate both fields"} value={btnText}/&gt;;
      const Editor1 = &lt;Editor id={"editor"} onChange={this.handleChange} className={this.state.editorKlasa} value={this.state.markdown} placeholder={"Enter ... some kind a text!? ..."} title={"This is rather obvious isnt it? Its editor window Sherlock :D"}/&gt;;
      const Preview1 = &lt;Preview id={"preview"} className={this.state.previewKlasa} dangerouslySetInnerHTML={{__html: marked(this.state.markdown, { renderer: renderer })}} title={"Its a preview window, Sherlock ;)"}/&gt;;
      const Arrow1 = &lt;Arrow id={"arrow"}/&gt;;
  
      if(this.state.myWidth&lt;=768){
          alert("Alternative");
          alert(this.state.myWidth);
          return (
  
              &lt;div id="inner2" ref={this.myInput} className="grid-container animated zoomIn" style={{height: this.state.inner2H}} onDoubleClick={this.inner2Height}&gt;
  
                  {EditorHead1}
                  {Editor1}
                  {PreviewHead1}
                  {Preview1}
                  {BtnEraser1}
                  {Arrow1}
  
              &lt;/div&gt;
  
          );
      }
      if(this.state.myWidth&gt;768){
          alert("Normal");
          alert(this.state.myWidth);
          return (
  
              &lt;div id="inner2" ref={this.myInput} className="grid-container animated zoomIn" style={{height: this.state.inner2H}} onDoubleClick={this.inner2Height}&gt;
  
                  {EditorHead1}
                  {PreviewHead1}
                  {BtnEraser1}
                  {Editor1}
                  {Preview1}
                  {Arrow1}
  
              &lt;/div&gt;
  
          );
      }
      }
  </code></pre>
  
  <p>Currently rearranging only works if you, after resize, refresh browser or “run” again codepen.</p>