Почему col начальной загрузки не принимает 12 столбцов автоматически?

Question

Я пытаюсь заставить три карты вести себя в Bootstrap.

Все три карты складываются горизонтально в режиме просмотра ноутбука и выше (col-lg-4). Это отлично работает.

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

Поскольку я не объявлял поведение для мобильных устройств, я ожидаю, что все три карты будут автоматически складываться вертикально на маленьком экране (мобильный и ниже), но это не так. Первые два просто берут по 6 столбцов для мобильных и даже небольших экранов.

Я попытался добавить класс col по умолчанию к первым двум, но они также не работают.

    <div class="col col-lg-4 col-md-6">
      <div class="card">
        <div class="card-header">
          <h3>Chihuahua</h3>
        </div>
        <div class="card-body">
          <h2>Free</h2>
          <p>5 Matches Per Day</p>
          <p>10 Messages Per Day</p>
          <p>Unlimited App Usage</p>
          <button type="button">Sign Up</button>
        </div>

      </div>

    </div>

    <div class="col col-lg-4 col-md-6">
      <div class="card">
        <div class="card-header">
          <h3>Labrador</h3>
        </div>
        <div class="card-body">
          <h2>$49 / mo</h2>
          <p>Unlimited Matches</p>
          <p>Unlimited Messages</p>
          <p>Unlimited App Usage</p>
          <button type="button">Sign Up</button>

        </div>

      </div>
    </div>

    <div class="col-lg-4">
      <div class="card">
        <div class="card-header">
          <h3>Mastiff</h3>
        </div>
        <div class="card-body">
          <h2>$99 / mo</h2>
          <p>Pirority Listing</p>
          <p>Unlimited Matches</p>
          <p>Unlimited Messages</p>
          <p>Unlimited App Usage</p>
          <button type="button">Sign Up</button>
        </div>

      </div>
    </div>

Я ожидаю, что все карты будут складываться вертикально, когда я перехожу в режим просмотра с мобильных устройств, первые две - по горизонтали, когда я - в виде iPad, а третья - по вертикали под ними. Но первые два остаются в горизонтальной линии, в то время как 3-е находится ниже на мобильных и еще меньших экранах.

Answer 1

Надеюсь, это то, что вы хотите.Это решение предназначено для Bootstrap 3. Если вы работаете с Bootstrap 4, вам придется выполнить некоторые настройки сетки.

 <div class="container-fluid">

     <div class="row">

         <div class="col-sm-6 col-md-4">
             <div class="card">
                 <div class="card-header">
                     <h3>Chihuahua</h3>
                 </div>
                 <div class="card-body">
                     <h2>Free</h2>
                     <p>5 Matches Per Day</p>
                     <p>10 Messages Per Day</p>
                     <p>Unlimited App Usage</p>
                     <button type="button">Sign Up</button>
                 </div>
             </div>
         </div>

         <div class="col-sm-6 col-md-4">
             <div class="card">
                 <div class="card-header">
                    <h3>Labrador</h3>
                 </div>
                 <div class="card-body">
                     <h2>$49 / mo</h2>
                     <p>Unlimited Matches</p>
                     <p>Unlimited Messages</p>
                     <p>Unlimited App Usage</p>
                     <button type="button">Sign Up</button>
                 </div>
             </div>
         </div>

         <div class="col-md-4 visible-xs visible-md visible-lg">
             <div class="card">
                 <div class="card-header">
                     <h3>Mastiff</h3>
                 </div>
                 <div class="card-body">
                     <h2>$99 / mo</h2>
                     <p>Pirority Listing</p>
                     <p>Unlimited Matches</p>
                     <p>Unlimited Messages</p>
                     <p>Unlimited App Usage</p>
                     <button type="button">Sign Up</button>
                 </div>
             </div>
         </div>

         <div class="row visible-sm">
             <div class="col-sm-12">
                 <div class="card">
                     <div class="card-header">
                         <h3>Mastiff</h3>
                     </div>
                     <div class="card-body">
                         <h2>$99 / mo</h2>
                         <p>Pirority Listing</p>
                         <p>Unlimited Matches</p>
                         <p>Unlimited Messages</p>
                         <p>Unlimited App Usage</p>
                         <button type="button">Sign Up</button>
                     </div>
                 </div>
             </div> 
         </div>

     </div>

 </div>