Почему уменьшается шрифт для девайсов xl в bootstrap?

Здраствуйте, начал изучать Bootstrap. Хотел сделать маленький макет он должен выглядеть вот так:

Вот код:
index.html:

<div class="container">
       <div class="row">
        <div class="col-xl-12 col-sm-12 col-md-12">Хедер</div>
        </div>
    </div>

styles.less:

@green:green;
@black:black;
@white:white;

.container{
    background: @green;
    width: 1000px;
    height: 2000px;
}

.col-xl-12, .col-sm-12, .col-md-12{
    background: @black;
    width: 1000px;
    height: 100px;
    margin: 0px;
    color:@white;
    font-size:50px;
    text-align: center;
}

Но мне нужно чтобы на смартфоне и планшете у надписи "Хедер" размер шрифта уменьшился до 25 px и я дописал вот это в styles.less:

.col-sm-12, .col-md-12{
   font-size:25px;
}

Но когда я написал этот код то у меня и на мониторе компьютера уменьшился шрифт до 25 px, а мне так не нужно, мне нужно чтобы на мониторе компьютера было 50px. Как тогда мне написать код?