How to change the style of only the last Column in a Bootstrap grid

So I have a React component that maps an array to react-bootstrap Columns in a row like so

<Container fluid>
  <Row xs={1} md={props.title === 'big rules' ? 1 : 2} lg={props.title === 'big rules' ? 2 : 4}>
    {props.rules.map((rule, index) => (
      <Col key={index}>
        {rule}
      </Col>
    ))}
  </Row>
</Container>

and I have a .sass file which gives each column a border on the right hand side,

.col {
 padding: 1rem;
 border-style: groove;
 border-top: none;
 border-bottom: none;
 border-left: none;
}

How do I setup my css so that the final column in each row is ignored, given that the number of columns changes based on the size of the screen?

from Recent Questions - Stack Overflow https://ift.tt/3wzFg64
https://ift.tt/eA8V8J