Как я могу поместить свой div в меню / кнопку для мобильной версии с помощью React?

Question

В настоящее время у меня есть SPA, в котором у меня есть div, содержащий кнопки, я хотел бы поместить этот div в кнопку / меню, когда я на мобильном телефоне.

Как я могу сделать это с помощью реакции?

Должен ли я отображать 2 разных содержимого в зависимости от innerdiv?

                <img style={{margin:'0px'}} id="displayedImg" src={vue01}/>
                <div className="texturesMenu1">
                    <div style={{position: 'relative'}}>
                        <img style={{paddingTop: '10px'}} onClick={this.texture01Click} src={texture01}/>
                        <p className="center1">imshowcem
                            <a style={{textDecoration: "none", color: "#fff"}} target="_blank" href="https://www.impermo.be/fr/carrelages-sol/laminaat-392#/reference-139393" className="material-icons">
                                add_circle_outline
                            </a>
                        </p>
                    </div>
                    <div style={{position: 'relative'}}>
                        <img onClick={this.texture02Click} src={texture02}/>
                        <p className="center1">imengrey
                            <a style={{textDecoration: "none", color: "#fff"}} target="_blank" href="https://www.impermo.be/fr/carrelages-sol/energy-1605#/reference-138229" className="material-icons">
                                add_circle_outline
                            </a>
                        </p>
                    </div>
                    <div style={{position: 'relative'}}>
                        <img onClick={this.texture03Click} src={texture03}/>
                        <p className="center1">imlomgri90
                            <a style={{textDecoration: "none", color: "#fff"}} target="_blank" href="https://www.impermo.be/fr/carrelages-sol/portobello-pietra-lombarda-1691#/reference-140070" className="material-icons">
                                add_circle_outline
                            </a>
                        </p>
                    </div>
                    <div style={{position: 'relative'}}>
                        <img onClick={this.texture04Click} src={texture04}/>
                        <p className="center1">imceppo
                            <a style={{textDecoration: "none", color: "#fff"}} target="_blank" href="https://www.impermo.be/fr/carrelages-sol/tilestone-ceppo-di-gre-1476#/reference-138938" className="material-icons">
                                add_circle_outline
                            </a>
                        </p>
                    </div>
                    <div style={{position: 'relative'}}>
                        <img onClick={this.texture05Click} src={texture05}/>
                        <p className="center1">imlomgri90
                            <a style={{textDecoration: "none", color: "#fff"}} target="_blank" href="https://www.impermo.be/fr/carrelages-sol/portobello-pietra-lombarda-1691#/reference-140071" className="material-icons">
                                add_circle_outline
                            </a>
                        </p>
                    </div>

            </div>