Как я могу поместить ряд кнопок и полей ввода в 1 строку на средних + экранах И разделить (подмножество) этих кнопок и полей ввода на 2 строки на небольших устройствах?
Итак: на более широких экранах (средний +): 1 строка содержит все кнопки и поля ввода.На экранах меньшего размера (xs, sm) я хочу разместить кнопки и поля ввода в 2 ряда.
Код показа некоторых кнопок только на средних + экранах работает.Этот код показан под кодом HTML Bootstrap.
Я перепробовал множество альтернатив, например, этот код, но он работает только на моем мобильном телефоне.Не на средних и настольных компьютерах, не на мобильных F12 и т. Д.
<div class="row">
<div class="col-xs-12 col-sm-6">
<button class="btn glyphicon glyphicon-fast-backward not-on-small-screens">L</button>
<button class="btn btn-info">M</button>
<button class="btn btn-info">1</button>
<button class="btn btn-info">2</button>
<button class="btn btn-info">3</button>
<button class="btn btn-info">4</button>
<button class="btn btn-info">5</button>
</div>
<form class="form-inline">
<span class="form-group">
<div class="col-xs-10 col-sm-4">
<button class="btn btn-success glyphicon not-on-small-screens">N</button>
<input type="text" id="search" maxlength="10" size="10" name="search" class="form-control input-inline" #searcher>
</div>
<div class="col-xs-2 col-sm-2">
<button class="btn btn-success glyphicon glyphicon-search">O</button>
<span class="glyphicon glyphicon-list-alt not-on-small-screens">
</span><input type="text" id="size" maxlength="3" size="3" class="form-control input-inline not-on-small-screens" name="size">
</div>
</span>
</form>
</div>
Классы CSS:
.input-inline {
display: inline;
}
@media only screen and (max-width: 900px) {
.not-on-small-screens {
display: none;
}
}