Загрузочный лоток - два (несколько) колонок для различной ширины

Question

У меня есть загрузочная сетка с 4 колонками. Я хотел иметь столбцы 1-2 и 3-4 стека, когда размер дисплея был планшетом. Когда размер дисплея был телефоном, я хотел, чтобы все 4 столбца были стекированы. Но для любых больших размеров столбцы не складывались.

Будет ли простой способ сделать это в бутстрапе? Вот пример кода из 4-х колонок:

<div class="row"> 
    <fieldset class="form-group col-sm-3"> 
     <label for="a1">work phone</label> 
     <input id="a1" type="text" class="form-control" readonly="readonly"> 
    </fieldset> 
    <fieldset class="form-group col-sm-3"> 
     <label for="a2">location</label> 
     <input id="a2" type="text" class="form-control" readonly="readonly"> 
    </fieldset> 
    <fieldset class="form-group col-sm-3"> 
     <label for="a3">contractor</label> 
     <input id="a3" type="text" class="form-control" readonly="readonly"> 
    </fieldset> 
    <fieldset class="form-group col-sm-3"> 
     <label for="a4">job code description</label> 
     <input id="a4" type="text" class="form-control" readonly="readonly"> 
    </fieldset> 
</div> 

Answer 1

Если вы хотите, 1-й и второй, то третий и четвёртый друг над другом, вам, вероятно, нужно, чтобы гнездиться столбцы/строки, а также добавить другой размер столбца для другого видовой экран. См. Nesting и Mixed Columns

См. Рабочий пример Фрагмент.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-6"> 
 
     <div class="row"> 
 
     <fieldset class="form-group col-lg-6 col-md-12"> 
 
      <label for="a1">work phone</label> 
 
      <input id="a1" type="text" class="form-control" readonly="readonly"> 
 
     </fieldset> 
 
     <fieldset class="form-group col-lg-6 col-md-12"> 
 
      <label for="a2">location</label> 
 
      <input id="a2" type="text" class="form-control" readonly="readonly"> 
 
     </fieldset> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-6"> 
 
     <div class="row"> 
 
     <fieldset class="form-group col-lg-6 col-md-12"> 
 
      <label for="a3">contractor</label> 
 
      <input id="a3" type="text" class="form-control" readonly="readonly"> 
 
     </fieldset> 
 
     <fieldset class="form-group col-lg-6 col-md-12"> 
 
      <label for="a4">job code description</label> 
 
      <input id="a4" type="text" class="form-control" readonly="readonly"> 
 
     </fieldset> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>