Строки и столбцы кнопки не помещаются на экране мобильного телефона.

Question

Я пытаюсь сделать так, чтобы мои кнопки помещались на экране мобильного телефона, но по какой-то причине это выглядит плохо.
Фон не будет продолжать двигаться вниз. Можете ли вы указать мне, где я был не прав?
Div кнопок находится внутри формы, если это помогает.
Я использую строки, а затем 3 col-md-4, я думаю, что это проблема моего тела или контейнера , но не смог найти проблему.

Внешний вид компьютера: Мобильный вид:

Html код

<div id="studentclass" style="display: none">

<div class="row justify-content-center text-center">


    <div class="col-md-4 classbutton">
        <button value="4" type="button" class="btn classbuttonsize btn-primary btn-lg">ב1
        </button>
    </div>


    <div class="col-md-4 classbutton">
        <button value="5" type="button" class="btn classbuttonsize btn-primary btn-lg">ב 2
        </button>
    </div>


    <div class="col-md-4 classbutton">
        <button value="6" type="button" class="btn classbuttonsize btn-primary btn-lg">ב 3
        </button>
    </div>


</div>
<div class="row justify-content-center text-center">


    <div class="col-md-4 classbutton">
        <button value="7" type="button" class="btn classbuttonsize btn-primary btn-lg">ג 1
        </button>
    </div>


    <div class="col-md-4 classbutton">
        <button value="8" type="button" class="btn classbuttonsize btn-primary btn-lg">ב 3
        </button>
    </div>


    <div class="col-md-4 classbutton">
        <button value="9" type="button" class="btn classbuttonsize btn-primary btn-lg">ב 3
        </button>
    </div>


</div>

CSS

<style>


.row {
    margin-right: 0px;
}

@media screen and (max-width: 650px) {


    .classbuttonsize {
        height: 75px;
        width: 75px;
    }

    #studentclass .row {
        width: 100%;
    }

    #studentclass .classbutton {
        height: 75px;
        width: 75px;
    }
}

img {
    width: 100%;
    height: auto;
}


html,
body {
    height: 100%;
    font-family: 'Alef', sans-serif;
}

.container {
    height: 100%;
    position: relative;
    display: flex;

}

.container > div {
    margin: auto;
}


body {

    background-image: url('{% static ' images/background.jpg ' %}');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

}


.card-img-top {
    width: 100%;
    height: auto;
}

.classbutton {
    padding: 15px 15px 15px 15px;
}

.classbuttonsize {
    height: 110px;
    width: 110px;
    font-size: 50px;
    background-color: #e7e7e7;
    color: black;
    border-radius: 8px;
    border: 1px solid black;

}

Answer 1

изменить структуру при использовании bootstrap 4

.row {
    margin-right: 0px;
}
.classbutton{
   margin-bottom:10px;
}
@media screen and (max-width: 650px) {


    .classbuttonsize {
        height: 75px;
        width: 75px;
            
    }

    #studentclass .row {
        width: 100%;
    }

    #studentclass .classbutton {
        height: 75px;
        width: 75px;
    }
}

img {
    width: 100%;
    height: auto;
}


html,
body {
    height: 100%;
    font-family: 'Alef', sans-serif;
}

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  
<div id="studentclass" style="display: block">

<div class="row justify-content-center text-center">


    <div class="col-4 classbutton">
        <button value="4" type="button" class="btn classbuttonsize btn-primary btn-lg">ב1
        </button>
    </div>


    <div class="col-4 classbutton">
        <button value="5" type="button" class="btn classbuttonsize btn-primary btn-lg">ב 2
        </button>
    </div>


    <div class="col-4 classbutton">
        <button value="6" type="button" class="btn classbuttonsize btn-primary btn-lg">ב 3
        </button>
    </div>


</div>
<div class="row justify-content-center text-center">


    <div class="col-4 classbutton">
        <button value="7" type="button" class="btn classbuttonsize btn-primary btn-lg">ג 1
        </button>
    </div>


    <div class="col-4 classbutton">
        <button value="8" type="button" class="btn classbuttonsize btn-primary btn-lg">ב 3
        </button>
    </div>


    <div class="col-4 classbutton">
        <button value="9" type="button" class="btn classbuttonsize btn-primary btn-lg">ב 3
        </button>
    </div>


</div>

Answer 2

Я это исправил:

просто добавьте в div col:

 <div class="col-4 classbutton" style="width: 33%; height: 33%">

Answer 3

попробуйте

<div class="col-sm-4 classbutton"> <button value="7" type="button" class="btn classbuttonsize btn-primary btn-lg">ג 1 </button> </div>