Occupy content space based on the screen size in ReactJS - reactjs

Question

I have a structure which consists:
an image horizontally stacked with a text array which are vertically stacked like this:
Here is the snippet for the same:
import React from "react";
export default function BoxHeader(props) {
return (
<div style={{ marginTop: `${props.Gap}rem` }}>
<div className="Image-wrapper">
<img
className="Profile-Image-Decorator"
alt=""
src="https://i.redd.it/rm6sqwpmesb41.jpg"
></img>
</div>
<div className="Collapsible-Navbar">
{props.Msg.map((element) => (
<div className="Message-Holder">{element}</div>
))}
</div>
</div>
);
}
What I want to achieve is on reducing the screensize, the text should move below the image, but what I actually get is this:
By using Bootstrap classes I managed to make a responsive navbar... but I wanted the same with my this section as well. Does anyone have any suggestions for the same?
For reproducing goto this link

Answer 1

Use Row and Col components to create responsive grids.
...
import { Row, Col } from "react-bootstrap";
export default function BoxHeader(props) {
return (
<div style={{ marginTop: `${props.Gap}rem` }}>
<div className="Body-wrapper">
<Row>
<Col sm={12} md={6}>
<div className="Image-wrapper">
<img
className="Profile-Image-Decorator"
alt=""
src="https://i.redd.it/rm6sqwpmesb41.jpg"
></img>
</div>
</Col>
<Col sm={12} md={6}>
<div className="Collapsible-Navbar">
{props.Msg.map((element) => (
<div className="Message-Holder">{element}</div>
))}
</div>
</Col>
</Row>
</div>
</div>
);
}