CODEWITHSUNDEEP
twitter-bootstrap
R.Podar
R.Podar

Reputation: 73

Bootstrap 4 Columns ordering

So, I have 3 columns {sm-2, sm-7, sm-3} and I've been trying to change the order on mobiles like this {sm-7 (on top), sm-2, sm-3}. I've tried to pull sm-7 and push sm 2 like this : 

 col-xs-pull-2 on sm7  
 col-xs-push-7 on sm2

I've also tried to order them like this, 

col-order-xs-1`   (on sm7)  
col-order-xs-2- 
col-order-xs-3

and this didn't work either.

I've also tried the order-first and order-last classes, without success. What am I missing ?

Upvotes: 1

Views: 141

Answers (2)

brandt.codes
brandt.codes

Reputation: 923

You need something like this?

<div class="container">
  <div class="row">
    <div class="col-12 col-sm-2 order-sm-2">A</div>
    <div class="col-12 col-sm-7 order-sm-1">B</div>
    <div class="col-12 col-sm-3 order-sm-3">C</div>
  </div>
</div>

Upvotes: 0

R.Podar
R.Podar

Reputation: 73

I changed the order of html elements like this : sm7 sm2 sm3. Then I just changed the order on bigger screens (sm+) using order-sm-1 , order-sm-2, order sm-3 on the corresponding column and it worked :D

Upvotes: 1

Related Questions