Выберите тег на дисплеях для мобильных устройств и ноутбуков

Question

У меня есть следующий div. Он содержит заголовок панели, где я столкнулся с проблемой. Тело панели отображается хорошо. Поэтому я дал код только для заголовка панели.

<div class="panel panel-default" style="margin: 8px;margin-top: -10px;"> 
    <div class="panel-heading"> 
     <h5>Legislators By State</h5> 
     <div class="search" style="float: right;margin-top: -29px;"> 
      <form class="form-inline"> 
       <div class="form-group"> 
        <select ng-model="state_select" ng-options="f.name for f in state_select | orderBy:'name'"> 
         <option value="">ALL STATES</option> 
        </select> 
       </div> 
      </form> 
     </div> 
    </div> 

1) Я хочу h5 тег, который будет отображаться на левой и выберите строку справа на мобильных и портативных дисплеев. В настоящее время он работает на ноутбуке, но не для мобильных телефонов. 2) В дисплеях ноутбуков выбор должен вести себя нормально, например, для выпадающего списка. В то время как в мобильном я хочу, чтобы, когда пользователь нажимает параметры, которые будут отображаться, как сейчас, мы получаем параметры, прокручиваемые в нижней части экрана. Чтобы пользователь мог прокручивать все параметры и выбирать одно значение.

Я новичок в отзывчивой конструкции, поэтому просто пытаюсь учиться.

Answer 1

Использование классов начальной загрузки Bootstrap .. здесь col-xs-6 .... «xs», используемый для мобильных устройств, и «6» - сколько столбцов мы хотим для этого div из общей 12-ти столбцовой сетки.

<div class="panel panel-default" style="margin: 8px;margin-top: -10px;"> 
<div class="panel-heading"> 
    <div class="row"> 
    <div class="col-xs-6"> 
    <h5>Legislators By State</h5> 
    </div> 
    <div class="col-xs-6"> 
    <div class="search"> 
     <form class="form-inline"> 
      <div class="form-group"> 
       <select class="form-control" ng-model="state_select" ng-options="f.name for f in state_select | orderBy:'name'"> 
        <option value="">ALL STATES</option> 
       </select> 
      </div> 
     </form> 
    </div> 
    </div> 
</div> 
</div>