当我在Bootstrap中的小型设备上使用push方法时，其他设备会变形

Question

首先，大家好:)。我想在bootstrap中制作响应式菜单。我设计了大型设备和中型设备。但是当我使用小型设备时，中型和大型设备会变形。谢谢你的帮助。

Html代码：

<div id="navbar" class="row">
                    <div id="menu1" class="col-lg-4 col-md-6 col-sm-6 col-xs-6 pull-left">
                        <ul class="row">
                            <li class="col-lg-6 col-lg-push-2 col-md-6 col-md-push-2 col-sm-6 col-sm-push-1"><a href="#"> Blog </a></li>
                            <li class="col-lg-6 col-lg-push-2 col-md-6 col-sm-6 col-sm-pull-1"><a href="#"> Portfolyo </a></li>
                        </ul>
                    </div>

                    <div id="menu2" class="col-lg-4 col-md-6 col-sm-6 col-xs-6 pull-right">
                        <ul class="row">
                            <li class="col-lg-6 col-lg-pull-2 col-md-6 col-md-push-3 col-sm-6 col-sm-push-3"><a href="#"> Hakkımda </a></li>
                            <li class="col-lg-6 col-md-6 col-md-push-2 col-sm-6 col-sm-push-2"><a href="#"> İletişim </a></li>
                        </ul>
                    </div>


                    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 col-lg-offset-5 col-md-offset-5 col-sm-offset-5 col-xs-offset-4" id="resim"></div>


                </div>

和Css代码：

div#menu1{z-index:3;}
div#menu1 ul{list-style-type:none;}
div#menu1 ul li{float:left;}
div#menu1 ul li a{text-decoration:none;font-size:25px;color:#333;}

div#menu2{z-index:3;}
div#menu2 ul{list-style-type:none;}
div#menu2 ul li{float:left;}
div#menu2 ul li a{text-decoration:none;font-size:25px;color:#333;}

div#resim{background:url(IMG_4109.JPG);width:200px;height:205px;border-radius:50%;margin-top:-135px;z-index:30000;border:7px solid #900;}