Bootstrap CSS响应对齐问题

Question

我的项目在桌面或笔记本电脑上看起来很不错..

网站位于：https://obscure-crag-61417.herokuapp.com/

当网站变小时，搜索框会超过导航栏并在标题下方

我知道媒体查询 - （虽然不是专家）但只是想弄清楚是否有更好的方法来做我正在做的事情。

这是我的这个页面的代码。我试图从导航栏中页面的容器部分复制网格。不确定这是否是我的问题所在？

 <div className="App">
            <nav class="navbar" style={{backgroundColor: "#000000"}}>
                <div class="col-md-2 brand">CoinStars</div>
                    <div class="col-md-7" style={{padding:"0px"}}><TestSearch onSearch={this.getData}/>
                    </div>
                    <div class="col-md-2 brandRight">1-800-COINSTARS</div>
            </nav>

            <div class="row">
                    <div class="col-md-2 pl-4">
                    <span class="bigMovers">Biggest Movers</span>
                    <Popular onSearch={this.getData}/>
                    </div>
                    <div class="col-md-7">
                    <Stats value={this.state.value}/>
                    <Graph value={this.state.value} />
                        <div style={{width:"90%"}}>
                            <h4>The Latest Tweets About {this.state.value} </h4>
                            {this.state.tweets.map(tweet =>
                                <div key={tweet.id}>
                                    <div className="media mb-4"><img src={(tweet.user.profile_image_url)} className="mr-3 circle"></img>
                                       <div className="media-body">
                                            <div className="mt-0 mb-1">
                                            <span className="twitUserName">{tweet.user.name}</span> 
                                            <span className="twitScreen">@{tweet.user.screen_name}</span>
                                            <span>{moment(tweet.created_at).fromNow()} </span>
                                            </div>
                                                    <a href={`https://twitter.com/${tweet.user.id}/status/${tweet.id_str}`} target="_blank">{tweet.text}</a>

                                        </div>
                                     </div>  
                                     </div>  
                                )}
                        </div>
                    </div>
                    <div class="col-md-2">
                    <span class="sponsors">Our Sponsors</span>
                        <div>
                        <img width="200" style={{padding:"10px 0 0 0"}} src="https://i.pinimg.com/736x/46/ed/81/46ed8183154d88646fbf96303660b126--learn-web-design-learn-coding.jpg"/>
                        </div>
                    </div>