Bootstrap использование col-x для нескольких разрешений

Question

У меня есть следующий код:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="card">
      <div class="col-md-3" style="display: inline-block; float:left;">
        ... content ...
      </div>

      <div class="col-md-3" style="display: inline-block; float:left;">
        ... content ...
      </div>

      <div class="col-md-3" style="display: inline-block; float:left;">
        ... content ...
      </div>

      <div class="col-md-3" style="display: inline-block; float:left;">
        ... content ...
      </div>
    </div>
  </div>
</div>

Это 4 элемента управления (входа), которые хорошо отображаются в настольном и мобильном разрешениях, на настольном компьютере все они расположены рядом друг с другом, а на мобильных устройствах - ниже друг друга.

Я хочу, чтобы на меньших разрешениях (мобильных) было 2 рядом друг с другом в первой строке и 2 рядом друг с другом во второй строке, но все же в большем разрешении они должны отображаться рядом с каждым другой в 1 строке, это с целью «экономии места», элементам управления не нужно брать всю строку самостоятельно, потому что ввод ограничен.

Я пытался, но не смог сделать это, играя с col-md-x и имея меньше div, но я не могу заставить его работать.

Как мне этого добиться? Спасибо за любое направление или предложение!

Answer 1

При использовании col-6 на экранах, меньших md, ваш col-6 будет помещать эти деления 2 в строку. Я переместил строку в класс вашей карты

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
  <div class="container">
 <div class="card">
<div class="row">
   
    <div class="col-6 col-md-3 col-lg-3 co-xl-3">     
     ... content ...
    </div>

    <div class="col-6 col-md-3 col-lg-3 co-xl-3" >                
     ... content ...
    </div>

    <div class="col-6 col-md-3 col-lg-3 co-xl-3" >
    ... content ...
    </div>

    <div class="col-6 col-md-3 col-lg-3 co-xl-3" >
     ... content ...
    </div>
</div>
</div>