Label html breaks text - fit with Bootstrap

Question

When I open my desktop page it looks like this:

When on cell phone, it looks like this:

My code is like this:

<div class="form-group">
        <label for="qtdpessoas" class="col-sm-2 control-label">Quantas pessoas junto com você da sua família frequentarão o culto de Vila Aricanduva?</label>
        <div class="col-sm-10">
          <select class="form-control" name="qtdpessoas" id="qtdpessoas" required="required">
              <option></option>
              <option value="1">Apenas eu</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="7">7 ou mais</option>
              
            </select>
        </div>
      </div>

I would like it to be the same as the phone even opening on the desktop, since on the desktop it piles the description of the whole label on the left.

I’m wearing bootstrap, I’m having a hard time adjusting it.

Answer 1

Remove the classes "col-Sm-2" and "col-Sm-10".

With these classes you are telling the label to occupy two columns of the grid and the input to occupy 10.

Ideally you place the elements inside a DIV and set how many columns that DIV will occupy.

Example:

<div class="form-group">
   <div class="col-12">
      <label for="qtdpessoas" class="control-label">Quantas pessoas junto com você da sua família frequentarão o culto de Vila Aricanduva?</label>
      <select class="form-control" name="qtdpessoas" id="qtdpessoas" required="required">
              <option></option>
              <option value="1">Apenas eu</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="7">7 ou mais</option>
              
         </select>
   </div>
        
</div>