How can I vertically stack left, right, and center columns in that order with reactstrap on md breakpoint?

Question

I am using reactstrap to style my three column page

<Row>
    <Col md="4">Left</Col>
    <Col md="9">Center</Col>
    <Col md="5">Right</Col>
 </Row>

This is the desired layout:

The reactstrap layout docs do not give example nor detail how this can be achieved. Currently they are vertically stacked in the same order that they are horizontally ordered left-to-right. I have tried several combinations of className and md props, but have not been able to implement this. How can this layout be achieved with reactstrap?

Answer 1

I found a simple solution as suggested by Toni Michel Caubet (.scss)

  @media(max-width: 768px) {
    .main-section {
      display: flex;
    }
    .left-col {
      order: 1;
    }

    .center-col {
      order: 3;
    }

    .right-col {
      order: 2;
    }
  }

The md breakpoint is 768px. This hardcoded value be replaced with bootstrap breakpoints.