CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
Echotest
Echotest

Reputation: 129

Bootstrap 4 lower screen size ordering

This is how my page looks like (roughly):

<div class="container new-container">
  <div class="row">
    <div class="col-md-4 info">
    ....
    </div>
    <div class="col-md-8 contact-form">
    ....
    </div>
  </div>
</div>

I have my info area on the left, and my contact form on the right side. Then when I resize my screen to preview how it would look like on the mobile(or lower screen size).

The info area is on one row and contact-from is on the second row, which is expected behavior.

My design looks different thought, it assumes contact-form to come first and then info area to be below.

Is there a css property or some way that I can keep my current layout to achieve this element arrangement? (on lower screen resolutions only)

Upvotes: 0

Views: 37

Answers (1)

Mohit Khandelwal
Mohit Khandelwal

Reputation: 651

If you are using bootstrap 4 you can use order class.

<div class="container new-container">
  <div class="row">
    <div class="col-md-4 order-sm-2 info">
    ....
    </div>
    <div class="col-md-8 order-sm-1 contact-form">
    ....
    </div>
  </div>
</div>

Reference - https://getbootstrap.com/docs/4.0/layout/grid/#order-classes

In case you are using bootstrap 3, you can use col-sm-pull-* or col-sm-push-*.

Reference - https://getbootstrap.com/docs/3.4/css/#grid-column-ordering

Upvotes: 1

Related Questions