Is there a way to use React Bootstrap to create a layout with two columns side by side, and have the column on the right stack on top of the column on the left when the screen size is reduced?
Check out the code snippet below:
import "./styles.css";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import Card from "react-bootstrap/Card";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
return (
<div className="App">
<Row>
<Col sm={8}>
<Card>
<Card.Body>
<Card.Title>Left Card/Bottom Card</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up
the bulk of the card's content.
</Card.Text>
</Card.Body>
</Card>
</Col>
<Col sm={4}>
<Card>
<Card.Body>
<Card.Title>Right Card/Top Card</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up
the bulk of the card's content.
</Card.Text>
</Card.Body>
</Card>
</Col>
</Row>
</div>
);
}
For a live example, visit this codesandbox link