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>