양식의 모든 입력란을 한 줄에 입력하고 양식의 응답 성을 향상시키는 방법은 무엇입니까?

Question

6 개의 필드 요소가있는 호텔 예약 양식을 만들었습니다. 모든 필드를 하나의 수평선으로 만들고이 양식의 응답 성을 좋게하십시오. 즉, 화면 크기가 줄어들면 필드 요소가 다른 필드 아래에 표시되어야합니다. . 내 코드 : https://jsfiddle.net/3vL0hss6/

<form class="form-inline"> 

       <label for="datepicker1" >Checkin</label> 
       <input type="text" id="datepicker1" placeholder="dd-mm-yyyy" > 
       <label for="datepicker2" >Checkout</label> 
       <input type="text" id="datepicker2" placeholder="dd-mm-yyyy" > 
       <label for="adults" >Adults</label> 
       <select name="adults" id="adults" > 
        <option>1</option> 
        <option selected="selected">2</option> 
        <option>3</option> 
        <option>4</option> 
        <option>5</option> 
        <option>6</option> 
        <option>7</option> 
        <option>8</option> 
        <option>9</option> 
        <option>10</option> 
        </select> 
       <label for="children" >Children</label> 
       <select name="children" id="children" > 
        <option selected="selected">0</option> 
        <option>1</option> 
        <option>2</option> 
        <option>3</option> 
        <option>4</option> 
        <option>5</option> 
        <option>6</option> 
        <option>7</option> 
        <option>8</option> 
        <option>9</option> 
        <option>10</option> 
        </select> 
       <input type="button" value="Check Availability" onClick="thelink()" > 

Answer 1

당신은 flex 및 media queries이를 달성하기 위해 사용할 수 있습니다.

기본적으로 컨테이너에 이러한 요소를 유지하고 두 개의 별도 미디어 쿼리가 있습니다. 화면 크기에 따라 컨테이너의 요소 방향을 지정합니다. 이와 비슷한 것인데, 무엇을 요구하고 있습니까?

Updated: 
    https://jsfiddle.net/3vL0hss6/1/