Изменить строку / столбцы Bootstrap

Question

Я хочу изменить внешний вид некоторых столбцов, потому что в адаптивном режиме это не очень хороший порядок.

Здесь у вас есть код:

  <div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
  <div class="container">
    <div class="row">
      <div class="col clienti">
        <h4><font color="green">1.</font> Te inregistrezi pe platforma<br>  Creeaza cont</h4><br>
        <h4><font color="green">3.</font> Primeste oferte la solicitarea ta.<br></h4><p>Relaxeaza-te, vei fi notificat de fiecare data<br>cand primesti o oferta noua.</p><br>
        <h4><font color="green">5.</font> Asteapta ca oferta ta sa fie acceptata si de<br>comerciant.</h4><br>
      </div>
      <div class="col clienti">
        <h4><font color="green">2.</font> Incarca solicitare noua.</h4><br><br>
        <h4><font color="green">4.</font> Accepta oferta potrivita nevoilor tale. <br></h4><f><br><br><br>
        <h4><font color="green">6.</font> Alege modalitatea de plata si locul <br>de unde sa ridici coletul.</h4><br>
      </div>
    </div>
</div>
</div>
<div class="tab-pane fade show active" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>

В адаптивном режиме это показывает плохой заказ 1,3,5,2,4,6. Что нужно изменить, чтобы сделать хороший заказ в отзывчивом, 1,2,3,4,5,6, но таком же стиле в обычном режиме?

Большое спасибо!

Answer 1

Вы можете попробовать использовать «col-6», чтобы он использовал половину ширины, например:

<div class="row">
  <div class="col-md-6"><h4>1. Content</h4></div>
  <div class="col-md-6"><h4>2. Content</h4></div>
  <div class="col-md-6"><h4>3. Content</h4></div>
  <div class="col-md-6"><h4>4. Content</h4></div>
  <div class="col-md-6"><h4>5. Content</h4></div>
  <div class="col-md-6"><h4>6. Content</h4></div>
</div>

В этом случае я использовал col-md-6, поэтому у него будет 2 столбца для любой экран среднего или большего размера. Для интервалов вы можете добавить отступы к классам типа "p-md-3". Обязательно ознакомьтесь с документацией Boostrap для получения дополнительной информации:)