Align radio button mobile

Question

I’m having trouble leaving the radio button next to the text.

Only in the mobile version that is "breaking" (The text is on top and the radio buttom go to the bottom line).

I need you to stay like this:

This is my code:

<div class="row">
    <div class="form-group col-md-12 col-sm-12">    
        <p align="center">Isso é um texto de exemplo :)</p>                         
            <div class="radio" >    
                <label class="radio-inline"><input type="radio" value="Sim" name="optradio">Sim</label>                 
                <label class="radio-inline"><input type="radio" value="Não" name="optradio">Não</label>                         
            </div>                                  
    </div>  
</div>

Look how you’re getting:

Even if I decrease the size of the radio it doesn’t stand next to the text :/

Answer 1

I made some small additions to your code, try whenever possible to use the classes that bootstrap provides, this will make these "breaks" do not happen. Another important point is to take care not to use these classes in inappropriate elements. Any questions give a look at documentation.

<div class="row">
  <div class="form-group col-md-12 col-sm-12">
    <div class="alinhamento">
      <p align="center">Isso é um texto de exemplo :)</p>
      <div class="radios">
        <label class="radio-inline"><input type="radio" value="Sim" name="optradio">Sim</label>
        <label class="radio-inline"><input type="radio" value="Não" name="optradio">Não</label>
      </div>
      <input type="text" class="form-control" id="inputTest">
    </div>
  </div>
</div>

Follows Jsfiddle with the code.