How to make Dropsdownlist + text inline under 768px? - html

Question

I'm trying to make my dropdownlists I have created to be on the same line under 768px.
Right now, I'm using the form-inline, but that only works over 768px and not under.
Can any tell me how this can be done? Have tried with a list, but that did not work well.
As you can see in the fiddle, I want some text over each dropdownlist. I know i'm not using an label, cause this makes
My Jsfiddle
<div class="col-xs-12">
<div class="form-inline">
<div class="form-group">
Adult<br />
<select class="dropdown" id="Dropdown-adult">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class="form-group">
Child (3-15)<br />
<select class="dropdown" id="Dropdown-child">
<option>0</option>
<option>1</option>
<option>2</option>
</select>
</div>
<div class="form-group">
Infant (0-3)<br />
<select class="dropdown" id="Dropdown-infant">
<option>0</option>
<option>1</option>
<option>2</option>
</select>
</div>
<div class="form-group">
Pet<br />
<select class="dropdown" id="Dropdown-pet">
<option>0</option>
<option>1</option>
<option>2</option>
</select>
</div>
</div>
<div class="form-group">
<div class="padding-top15">
<button type="submit" class="bookingbutton">BOOK NOW</button>
</div>
</div>
</div>
Hope someone can tell me what I should look at.
Updated:
I think you guys have misunderstood what I was trying to tell. Right now when viewing the page over 768px the dropdownlists are inline as they should be.
If the webpage goes under 768px, all the dropdownlists going out of the inline, which it should not do. I just want to use 2 lines instead of 5-8
I just want it to look the same as it does over 768px. I have uploaded the image of how it should look like under 768px.

Answer 1

It's because Bootstrap add classes to make a responsive grid. If you want your lists to be always on the same line just add this in you css:
.form-group{
display:inline-block
}
JS Fiddle: https://jsfiddle.net/f8gfa768/1/

Answer 2

If I understood you correctly, you want to achieve under 768px width:
[text] [dropdown] <!-- new line -->
[text] [dropdown] <!-- new line -->
[text] [dropdown] <!-- new line -->
[text] [dropdown] <!-- new line -->
Those br tags are messing up your styles. Why don't you remove them, and add display: block/inline-block styles to select element, depending on the window width, which will replace that br:
select{
display: inline-block;
}
#media (min-width: 768px){
select{
display: block;
}
}
#Dropdown-adult {
height: 30px;
font-size: 15px;
width: 45px;
}
#Dropdown-child {
height: 30px;
font-size: 15px;
width: 80px;
}
#Dropdown-infant {
height: 30px;
font-size: 15px;
width: 80px;
}
#Dropdown-pet {
height: 30px;
font-size: 15px;
width: 45px;
}
#Dropdown-vehicles {
max-width: 100%;
height: 30px;
width: 100%;
font-size: 15px;
}
.bookingbutton {
background-color: #F6861F;
border-style: none;
height: 30px;
width: 110px;
color: white;
font-size: 15px;
text-align: center;
font-weight: bold;
font-family: 'Open Sans', sans-serif;
}
.padding-top15 {
padding-top: 15px;
}
select{
display: inline-block;
}
#media (min-width: 768px){
select{
display: block;
}
}
<div class="col-xs-12">
<div class="form-inline">
<div class="form-group">
Adult
<select class="dropdown" id="Dropdown-adult">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class="form-group">
Child (3-15)
<select class="dropdown" id="Dropdown-child">
<option>0</option>
<option>1</option>
<option>2</option>
</select>
</div>
<div class="form-group">
Infant (0-3)
<select class="dropdown" id="Dropdown-infant">
<option>0</option>
<option>1</option>
<option>2</option>
</select>
</div>
<div class="form-group">
Pet
<select class="dropdown" id="Dropdown-pet">
<option>0</option>
<option>1</option>
<option>2</option>
</select>
</div>
</div>
<div class="form-group">
<div class="padding-top15">
<button type="submit" class="bookingbutton">BOOK NOW</button>
</div>
</div>
</div>
JSFiddle