I have a basic layout structure which consists of 2 rows:
- Row 1 has 2 columns
- Row 2 has 1 column
When possible both rows should expand in width and prevent vertical scroll of the page. However, when resizing I want to make the first row's columns stack vertically, with the column of the second row stacking below them.
Consider the following snippet:
import { Col, Container, Row, Table } from "react-bootstrap";
const App = () => {
return (
<Container fluid className="d-flex flex-column h-100">
<Row style={{minHeight: 0}} className="flex-fill">
<Col lg={12} xl={9} className="h-100 overflow-auto bg-info">
<Table responsive>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
</thead>
<tbody>
{[...Array(100)].map((x, i) => (
<tr key={i}>
<td>Row {i}</td>
<td>Row {i}</td>
<td>Row {i}</td>
</tr>
))}
</tbody>
</Table>
</Col>
<Col
lg={12}
xl={3}
className="h-100 bg-secondary p-5 text-center text-white fs-1"
>
Content
</Col>
</Row>
<Row className="">
<Col style={{backgroundColor: "rgb(255,0,0,0.4)"}} className="h-100 p-5 text-white fs-1">
Other Content
</Col>
</Row>
</Container>
);
};
export default App;
Here is also the index.html in case it matters:
<!DOCTYPE html>
<html class="vh-100 vw-100" lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Test</title>
</head>
<body class="vh-100 vw-100">
<div id="root" class="vh-100 vw-100"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
This does not produce the expected result. It works great when they are expanded in width, but once I resize below the lg breakpoint, the "Content" column stacks beneath the table column as expected, but the "Other Content" column stays on top of it instead of moving further down.
Screensots for clarity:
