表单按钮在移动设备上超出了div

Question

我使用bootstrap创建一个简单的联系表单并集成谷歌地图。但是，当我尝试使用移动设备时，按钮会离开div并且谷歌地图会在按钮旁边显示。

    <div class="container" id="contacts-container">
        <div class="container" id="title-container">
            <div class="row" id="title-row">
                <h3 id="title-h3">Contactos</h3>
                <p>Some sub title text</p>
            </div><!-- end of title row -->
    </div><!-- end of title container -->
    <div clas="container" id="contacts-main-container">
        <div class="row">
            <div class="col-md-6" id="contact-form">
                <form>
                    <div class="form-group form-group-contacts">
                        <label>Nome:</label>
                        <input type="name" class="form-control" id="contacts-form-name" placeholder="Insira o seu Nome.">
                    </div><!-- end of form group -->
                    <div class="form-group form-group-contacts">
                        <label>Email:</label>
                        <input type="email" class="form-control" id="contacts-form-emai1" aria-describedby="emailHelp" placeholder="Insira o seu email.">
                    </div><!-- end of form group -->
                    <div class="form-group form-group-contacts">
                        <label for="select-subject">Assunto:</label>
                        <select class="form-control" id="contacts-form-select-subject">
                          <option>Assunto1</option>
                          <option>Assunto2</option>
                          <option>Assunto3</option>
                          <option>Assunto4</option>
                        </select>
                    </div><!-- end of form group -->
                    <div class="form-group form-group-contacts">
                        <label>Comentarios:</label>
                        <textarea class="form-control" id="contacts-form-text" rows="4"></textarea>
                    </div><!-- end of form group -->
                    <div class="button-wrapper">
                        <button type="button" class="btn btn-primary" id="contacts-form-send-button">Enviar</button>
                    </div>
                </form><!-- end of form -->
            </div> 
            <div class="col-md-6" id="contact-googlemaps">
                <div class="google-maps">
                     <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d7098.94326104394!2d78.0430654485247!3d27.172909818538997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1385710909804" width="600" height="450" frameborder="0" style="border:0"></iframe>
                </div>
            </div>
        </div><!-- end of row -->
    </div><!-- end of main container -->

    <style>
        /* Contactos */
        #contacts-main-container{
            padding-top: 30px;
            padding-bottom: 75px;
        }
        /*  ---  */
        /* Form Contactos */
        #contact-form{
            background-color: blue;
        }

        .form-group-contacts{
            padding-top:10px;
        }

        .form-group-contacts > label{
            color: rgb(237,93,84);
        }

        .form-group-contacts > input:focus, .form-group-contacts > select:focus, .form-group-contacts > textarea:focus{
                border: 1px solid rgb(238,56,37);
                box-shadow: 0 0 1px rgb(238,56,37), 0 0 3px rgb(238,56,37);
            }

        #contacts-form-send-button{
            background-color: rgb(237,93,84);
            color: white;
            border: 1px solid white;
            font-weight: bold;
        }

        #contacts-form-send-button:hover{
            background-color: white;
            color: rgb(238,56,37);
            font-weight: bold;
            border: 1px solid rgb(238,56,37);
        }

        .form-group-contacts > textarea{
            resize: none;
        }

        .button-wrapper {
            float: left;
        }

        #contact-googlemaps{
            padding-top: 10px;
            overflow: auto;
            background-color: red;
        }

        /*  ---  */

        /*  Google Maps  */
        .google-maps {
            position: relative;
            padding-bottom: 75%; // This is the aspect ratio
            height: 0;
            overflow: hidden;
        }
        .google-maps iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100% !important;
            height: 100% !important;
        }
        /*  ---  */
    </style>

这是靴子：http://www.bootply.com/8lHNqslErb