CODEWITHSUNDEEP
twitter-bootstrapcssgrid
AnApprentice
AnApprentice

Reputation: 110970

How to use bootstrap grid layout to move a right column on top for smaller displays?

Using bootstrap v4.0.0a6

I have two columns. On smaller displays, the right column col-md-4 is wrapping under the larger column.

On larger displays, I want the smaller column on the right, but on smaller displays, I want the smaller column on top, not the current bottom.

How can I use bootstrap's grid layout to get the smaller column to be on top on the smaller screen size?

https://jsfiddle.net/sky2r5ca/2/

.col-md-8 {
  background: red;
}

.col-md-4 {
  background: green;
}

  <div class="container">
    <div class="row justify-content-md-center">
      <div class="col-md-8">
          YYYYYY
      </div>
      <div class="col-md-4">
      XXXXXXXX
      </div>
    </div>
  </div>

Upvotes: 2

Views: 1287

Answers (1)

SuperVeetz
SuperVeetz

Reputation: 2176

I found the answer here: https://v4-alpha.getbootstrap.com/layout/grid/

The push/pull classes from Bootstrap 3 have changed. They are now just push/pull instead of col-**-push this has changed to just push-xx-#.

See my fiddle: https://jsfiddle.net/sky2r5ca/4/

Upvotes: 3

Related Questions