CODEWITHSUNDEEP
bootstrap-5
acer.js
acer.js

Reputation: 3

How to change order of the columns after breakpoint?

I have 3 columns in one row. After screen width reach less than md (768px) there is a breakpoint. At this point, I want the first container become the last one and the two others stay in one line. How I can do it?

Code:

<div class="container">
  <div class="row">
    <div class="col-md-4">

    </div>
    <div class="col-md-3">

    </div>
    <div class="col-md-3">

    </div>
  </div>
</div>

Upvotes: 0

Views: 203

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362360

Use the order classes...

<div class="container">
  <div class="row">
    <div class="col-md-4 border order-last order-md-0">
        1
    </div>
    <div class="col-md-3 col-6 border">
        2
    </div>
    <div class="col-md-3 col-6 border">
        3
    </div>
  </div>
</div>

Codeply

Upvotes: 1

Related Questions