Как изменить последовательность тегов div в Bootstrap?

Я хочу изменить последовательность тегов div в этом page, где кнопка поиска помещается в первое положение слева, а затем who section, when section, where section. Другими словами, я хочу изменить порядок разделов. Я хочу изменить последовательность div только на больших (lg) экранах. Я не могу изменить положение div в файле HTML.Как изменить последовательность тегов div в Bootstrap?

Что я делаю неправильно?

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta charset="utf-8" /> 
    <title></title> 
    <!--<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">--> 
    <link href="bootstrap_Cerulean.min.css" rel="stylesheet" /> 
    <link href="style.css" rel="stylesheet" /> 
    <link href="responsive.css" rel="stylesheet" /> 
</head> 

<body dir="rtl"> 

<div class="row"> 
    <div class="form-group col-sm-6 col-md-3"> 
     <h4 class="title">Where</h4> 
     <label>Your Destination</label> 
     <input type="text" class="input-text full-width" placeholder="enter a destination or hotel name"> 
    </div> 

    <div class="form-group col-sm-6 col-md-4"> 
     <h4 class="title">When</h4> 
     <div class="row"> 
      <div class="col-xs-6"> 
       <label>Check In</label> 
       <div class="datepicker-wrap"> 
        <input type="text" class="input-text full-width hasDatepicker" placeholder="mm/dd/yy" id="dp1456316268201"><img class="ui-datepicker-trigger" src="images/icon/blank.png" alt="" title=""> 
       </div> 
      </div> 
      <div class="col-xs-6"> 
       <label>Check Out</label> 
       <div class="datepicker-wrap"> 
        <input type="text" class="input-text full-width hasDatepicker" placeholder="mm/dd/yy" id="dp1456316268202"><img class="ui-datepicker-trigger" src="images/icon/blank.png" alt="" title=""> 
       </div> 
      </div> 
     </div> 
    </div> 

    <div class="form-group col-sm-6 col-md-3"> 
     <h4 class="title">Who</h4> 
     <div class="row"> 
      <div class="col-xs-4"> 
       <label>Rooms</label> 
       <div class="selector"> 
        <select class="full-width"> 
         <option value="1">01</option> 
         <option value="2">02</option> 
         <option value="3">03</option> 
         <option value="4">04</option> 
        </select> 
        <span class="custom-select full-width">01</span> 
       </div> 
      </div> 
      <div class="col-xs-4"> 
       <label>Adults</label> 
       <div class="selector"> 
        <select class="full-width"> 
         <option value="1">01</option> 
         <option value="2">02</option> 
         <option value="3">03</option> 
         <option value="4">04</option> 
        </select> 
        <span class="custom-select full-width">01</span> 
       </div> 
      </div> 
      <div class="col-xs-4"> 
       <label>Kids</label> 
       <div class="selector"> 
        <select class="full-width"> 
         <option value="1">01</option> 
         <option value="2">02</option> 
         <option value="3">03</option> 
         <option value="4">04</option> 
        </select> 
        <span class="custom-select full-width">01</span> 
       </div> 
      </div> 
     </div> 
    </div> 

    <div class="form-group col-sm-6 col-md-2 fixheight"> 
     <label class="hidden-xs">&nbsp;</label> 
     <button type="submit" class="full-width icon-check animated bounce" data-animation-type="bounce" data-animation-duration="1" style="animation-duration: 1s; visibility: visible;">SEARCH NOW</button> 
    </div> 
</div> 

<script src="jquery.js"></script> 
<script src="bootstrap.min.js"></script> 

</body> 
</html>

источник

2016-02-24 programmer138200

https://scotch.io/tutorials/ переупорядочить-CSS-столбцы, используя-самозагрузка –

Вы должны смотреть в column ordering раздел в начальной загрузке документации

Что касается вашего примера попробуйте (обратите внимание col-lg-push* и col-lg-pull* классов):

<div class="row"> 
    <div class="form-group col-sm-6 col-md-3 col-lg-push-9"> 
     <h4 class="title">Where</h4> 
     <label>Your Destination</label> 
     <input type="text" class="input-text full-width" placeholder="enter a destination or hotel name"> 
    </div> 

    <div class="form-group col-sm-6 col-md-4 col-lg-push-2"> 
     <h4 class="title">When</h4> 
     <div class="row"> 
      <div class="col-xs-6"> 
       <label>Check In</label> 
       <div class="datepicker-wrap"> 
        <input type="text" class="input-text full-width hasDatepicker" placeholder="mm/dd/yy" id="dp1456316268201"><img class="ui-datepicker-trigger" src="images/icon/blank.png" alt="" title=""> 
       </div> 
      </div> 
      <div class="col-xs-6"> 
       <label>Check Out</label> 
       <div class="datepicker-wrap"> 
        <input type="text" class="input-text full-width hasDatepicker" placeholder="mm/dd/yy" id="dp1456316268202"><img class="ui-datepicker-trigger" src="images/icon/blank.png" alt="" title=""> 
       </div> 
      </div> 
     </div> 
    </div> 

    <div class="form-group col-sm-6 col-md-3 col-lg-pull-5"> 
     <h4 class="title">Who</h4> 
     <div class="row"> 
      <div class="col-xs-4"> 
       <label>Rooms</label> 
       <div class="selector"> 
        <select class="full-width"> 
         <option value="1">01</option> 
         <option value="2">02</option> 
         <option value="3">03</option> 
         <option value="4">04</option> 
        </select><span class="custom-select full-width">01</span> 
       </div> 
      </div> 
      <div class="col-xs-4"> 
       <label>Adults</label> 
       <div class="selector"> 
        <select class="full-width"> 
         <option value="1">01</option> 
         <option value="2">02</option> 
         <option value="3">03</option> 
         <option value="4">04</option> 
        </select><span class="custom-select full-width">01</span> 
       </div> 
      </div> 
      <div class="col-xs-4"> 
       <label>Kids</label> 
       <div class="selector"> 
        <select class="full-width"> 
         <option value="1">01</option> 
         <option value="2">02</option> 
         <option value="3">03</option> 
         <option value="4">04</option> 
        </select><span class="custom-select full-width">01</span> 
       </div> 
      </div> 
     </div> 
    </div> 

    <div class="form-group col-sm-6 col-md-2 col-lg-pull-10 fixheight"> 
     <label class="hidden-xs">&nbsp;</label> 
     <button type="submit" class="full-width icon-check animated bounce" data-animation-type="bounce" data-animation-duration="1" style="animation-duration: 1s; visibility: visible;">SEARCH NOW</button> 
    </div> 
</div>

источник

2016-02-24 13:07:16

Как изменить последовательность тегов div в Bootstrap?

ответ

Смежные вопросы