I am using react-bootstrap to make my portfolio website and i want to add the newsletter component and it look good on desktop but i can't seem to make it take the whole row on mobile

<Col lg={12}>
    <div className="newsletter-bx wow slideInUp">
      <Row>
        <Col lg={12} md={6} xl={5}>
          <h3>Subscribe to our Newsletter<br></br> & Never miss latest updates</h3>
          {status === 'sending' && <Alert>Sending...</Alert>}
          {status === 'error' && <Alert variant="danger">{message}</Alert>}
          {status === 'success' && <Alert variant="success">{message}</Alert>}
        </Col>
        <Col md={6} xl={7}>
          <form onSubmit={handleSubmit}>
            <div className="new-email-bx">
              <input value={email} type="email" onChange={(e) => setEmail(e.target.value)} placeholder="Email Address" />
              <button type="submit">Submit</button>
            </div>
          </form>
        </Col>
      </Row>
    </div>
  </Col>

This is my code.

Newsletter component