Change row/columns Bootstrap

user_12930335 0
Viewed 47

I want to change the look for some columns because in responsive mode it`s not a good order.

Here you have the code:

  <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>

In responsive mode this show a bad order 1,3,5,2,4,6. What must to change to do a good order in responsive, 1,2,3,4,5,6, but the same style on normal mode?

Thanks a lot!

bootstrap-4 css html
1 Answers

You could try using "col-6" so it will use half of the width, like this:

<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>

In this case I used col-md-6 so it will have 2 columns for any medium or larger sized screen. For spacing, you can add padding to the classes like "p-md-3". Definitely check out boostrap's documentation for more info :)

user_130900950
Related