0

I am trying to achieve the design given in the photo below, where I would have two columns on the desktop version and a single column for the mobile version.

enter image description here

I am using bootstrap, or to be more specific, reactstrap. The code I have so far:

<Row className="flex-column-reverse flex-md-row">
    <Col md={8}>
        <Card>B</Card>
    </Col>
    <Col md={4}>
        <Card>A</Card>
    </Col>
</Row>
<Row>
    <Col md={8} />
    <Col md={4}>
        <Card>C</Card>
    </Col>
</Row>

Which does give me the correct order of elements, but the card C aligns with the bottom of the card B on desktop, which is not what I want. Is there a way I can achieve my design? I am fine with changing the markup, using CSS grid, order property, anything (answers without js preffered).

EZbrute
  • 190
  • 10

0 Answers0