Boostrap - multiple input-group-addon on phone

Question

I use Bootstrap 3 and i have a multiple datepicker (from - to). It work well on a compute however i have problem for mobile phone compatibility. My input group overflows the screen and do not resize all the group.

In case of small device, i would like to have the the group on 2 rows: - the first with the addon From + its datepicker - the second with the addon To + its datepicker

how could i do ?

my html:

  <form class="form-horizontal">
        <div class="form-group">
            <div class="input-daterange" style="padding-left: 15px; padding-right: 15px" id="datepicker" >
                <div class="input-group">
                    <div class="input-group-addon">From</div>
                    <input type="date" class="form-control" name="beginDate" id="beginDate"/>
                    <div class="input-group-addon" for="endDate">To</div>
                    <input type="date" class="form-control" name="endDate" id="endDate"/>
                </div>
            </div>
        </div>
    </form>

EDIT : I know it have to be done in css with @media, but how to get to the line only after the first datetimepicker ?

Answer 1

Bootstrap doesn't support multiple input fields within a single input group, regardless of browser:

Basic example

Place one add-on or button on either side of an input. You may also place one on both sides of an input.

We do not support multiple add-ons on a single side.

We do not support multiple form-controls in a single input group.