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

Bootstrap-4 didn't have the push/pull classes that would have been really helpful... so one solution is to have the center-Div twice; Once in the middle for the desktop (which hides on tablet)... and placed in the end for the tablet and smaller sizes (and hidden on desktop)...

relevant HTML:

<div className="container-fluid">
  <h1>Push and Pull</h1>
  <p>Resize the browser window to see the effect.</p>
  <div className="row">
    <div className="col-12 d-none d-sm-block col-sm-4 order-2" >CENTER</div>
    <div className="col-12 col-sm-4 order-1" >LEFT</div>
    <div className="col-12 col-sm-4 order-3" >RIGHT</div>
    <div className="col-12 d-sm-none order-4" >CENTER2</div>
  </div>
</div>

relevant CSS:

.row div:nth-of-type(2){ background:lightpink; }
.row div:nth-of-type(3){ background:lightblue; }

working stackblitz here

Answer 2

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.