Bootstrap Text Align on the basis of breakpoints

Consider the code:

import React from 'react'
import DarkPattern from '../Assets/dark-pattern.jpg'

const Profile = () => {
    return (
        <div>
            <section className="bg-dark text-light  text-center ">
            <img src='https://i.pinimg.com/originals/ba/c1/37/bac13770cdea801e72852d8dc7160295.png' className='profile-img' alt='profile-img' />
           
                <div className="row px-5 w-75 mx-auto" >
                <div className="text-start col-md-6 col-md-4">
                    <h1>Name</h1>
                    <p>Tag</p>
                </div>
                <div className="text-end col-md-6 col-md-4 ">
                    <h1>Level</h1>
                    <p>Score</p>
                </div>
                </div>
            </section>
        </div>
    )
}

export default Profile

With the output:

and in mobile mode:

What I want to do in mobile mode is to make the text-align center only on mobile mode. I want to left column to text-align-start and the right to text-align-end. Any ideas??

P.S. Only bootstrap, don't wanna use the CSS Media Queries.