Как сделать блок кнопок который будет склеен между собой, но при мобильной версии будет становиться выпадающим списком?

/* Тут пишите свои стили*/

@media screen and (min-width: 320px) { /*Размер экрана на котором будет скрыть список*/
  .check-buttons {
    display: none;
  }
}

@media screen and (min-width: 1024px) {
  .check-buttons {
    display: block;
  }
  #orders_statuses {
  display: none;
  }
}

 <div class="check-buttons">
    <ul class="f-list">
        <li>
            <input type="radio" class="radios" name="radios" value="active" checked>
            <label for="active">Активные</label>
        </li>
        <li>
            <input type="radio" class="radios" name="radios" value="active" checked>
            <label for="active">На проверке</label>
        </li>
        <li>
            <input type="radio" class="radios" name="radios" value="active" checked>
            <label for="active">Пересчитанные</label>
        </li>
        <li>
            <input type="radio" class="radios" name="radios" value="active" checked>
            <label for="active">Завершенные</label>
        </li>
        <li>
            <input type="radio" class="radios" name="radios" value="active" checked>
            <label for="active">Отмененные</label>
        </li>
        <li>
            <input type="radio" class="radios" name="radios" value="active" checked>
            <label for="active">Все</label>
        </li>

    </ul>


 </div>
 <select name="orders" id="orders_statuses" style="position: relative;">
   <option value="active">Активные заявки</option>    
   <option value="checking_option">Заявки на проверке</option>
   <option value="reaclculation_option">Пересчитанные заявки</option>
   <option value="finished">Заверщенные заявки</option>
   <option value="canceled">Отмененные заявки</option>
   <option value="all">Все заявки</option>
 </select>