reactjs - How to reverse columns in reactstrap?

Question

I want to implement something like this

on Desktop : A B on Mobile : B A

I have tried using using react strap grid system but couldn't find a way to make it work Im using reactstrap library in nextjs ,

Answer 1

Reactstrap also provides a bootstrap lib

which is imported in _app.js as so

import "../assets/css/bootstrap.min.css";

now as it also support the latest version of bootstrap , which is bootstrap 4

col-sm-push-4 , col-sm-pull-4 classes are deprecated and cannot be used.

Bootstrap 4 provides other flex classes to make it responsive

here's the solution

 <Container fluid>
        <Row className="flex-column-reverse flex-md-row">
        <Col className="col-md-8">
          <h1>AAAAA</h1>
       </Col>
       <Col className="col-md-4">
       <h1>BBBBB</h1>

       </Col>
        </Row>
</Container>