How to change the layout of Radio Buttons in the responsive layout with Bootstrap or another tool?

Question

Currently when the site is in mobile mode/reduced to a certain resolution the Radio Buttons automatically position themselves as follows:

I’d like it to look something like this:

Part of the HTML code:

 <div class="row" style="padding-left: 15%;">

                <div class="col-sm-2">

                    <input type="radio" id="1" name="quartos" value="1" class="RadionQuarto">
                    <label for="1">1</label><br>

                </div>

                <div class="col-sm-2">

                    <input type="radio" id="2" name="quartos" value="2" class="RadionQuarto">
                    <label for="2">2</label><br>

                </div>

                <div class="col-sm-2">
                    <input type="radio" id="3" name="quartos" value="3" class="RadionQuarto">
                    <label for="3">3</label><br>

                </div>
                <div class="col-sm-2">
                    <input type="radio" id="4" name="quartos" value="4" class="RadionQuarto">
                    <label for="4">4</label><br>

                </div>
                <div class="col-sm-2">

                    <input type="radio" id="5" name="quartos" value="5" class="RadionQuarto">
                    <label for="5">5</label><br>

                </div>

            </div>

Answer 1

Face is just change col-sm-2 by just col-2 so they’ll never get down from each other and stay in the same line. Since you are using Bootstrap, I strongly suggest you study the classes of Grid his https://getbootstrap.com/docs/4.4/layout/grid/

Code of the image above:

<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />

<div class="row" style="padding-left: 15%;">

  <div class="col-2">

      <input type="radio" id="1" name="quartos" value="1" class="RadionQuarto">
      <label for="1">1</label><br>

  </div>

  <div class="col-2">

      <input type="radio" id="2" name="quartos" value="2" class="RadionQuarto">
      <label for="2">2</label><br>

  </div>

  <div class="col-2">
      <input type="radio" id="3" name="quartos" value="3" class="RadionQuarto">
      <label for="3">3</label><br>

  </div>
  <div class="col-2">
      <input type="radio" id="4" name="quartos" value="4" class="RadionQuarto">
      <label for="4">4</label><br>

  </div>
  <div class="col-2">

      <input type="radio" id="5" name="quartos" value="5" class="RadionQuarto">
      <label for="5">5</label><br>

  </div>

</div>