CODEWITHSUNDEEP
htmlbootstrap-4
Craig
Craig

Reputation: 47

Bootstrap: column pushed after another in small display

In displays bigger than mobile I'd like to have this disposition (in this order):

column-A large 2 - column-B large 8 - column-C large 2

In mobile I'd like to have (in different rows) the shift of the first column after the second one:

column-B large 12 - column-A large 6 - column-C large 6

Someone could tell me if it is possibile and if yes how should I do? Thanks

 <div class="container">
     <div class="row">
         <div class="col-lg-2"></div>
         <div class="col-lg-8"></div>
         <div class="col-lg-2"></div>
     </div>
 </div>

Upvotes: 1

Views: 795

Answers (2)

David Liang
David Liang

Reputation: 21476

If you're doing mobile first, you should define the columns in the HTML in the order you want first:

<div class="container">
  <div class="row">
    <div class="col-12">
      B
    </div>
    <div class="col-6">
      A
    </div>
    <div class="col-6">
      C
    </div>
  </div> 
</div>

That makes sure it will look like what you want in small devices. And then we can add more styles for large devices.

enter image description here

Then on bigger devices (you said bigger than mobiles), that corresponds to col-md-* class in bootstrap. You can add that to the columns. Also since you want column A appear first, you can set their orders by using bootstrap class order-md-*. The smaller the order, the earlier position it will get.

<div class="container">
  <div class="row">
    <div class="col-12 col-md-8 order-md-2">
      B
    </div>
    <div class="col-6 col-md-2 order-md-1">
      A
    </div>
    <div class="col-6 col-md-2 order-md-3">
      C
    </div>
  </div> 
</div>

The result: enter image description here

See fiddle: http://jsfiddle.net/aq9Laaew/61343/

Upvotes: 2

לבני מלכה
לבני מלכה

Reputation: 16251

To mobile use col-*:

Learn here :https://getbootstrap.com/docs/4.0/layout/grid/

and use order:https://getbootstrap.com/docs/4.0/utilities/flex/#order

See fiddle:https://jsfiddle.net/L50gsumj/3/

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
 <div class="container">
     <div class="row">
         <div class="col-md-2 col-6   order-2 order-md-1">a</div>
         <div class="col-md-8 col-12  order-1 order-md-2">b</div>
         <div class="col-md-2 col-6   order-3 order-md-3">c</div>
     </div>
 </div>

Upvotes: 0

Related Questions