Text is not center in small device

[venus222-ux]

I want to make a menu and above to have information like address and phone. But when i make the device in mobile i want the all three text to be one above other with text center:

<header>
<div class="container">
    <div class="row">
<div class="col-sm-12 col-md-6 col-12 text-left">
    <h2 class="my-md-6">731/21 Secound Street, Manchester</h2>
    <h2 class="my-md-6">Mon-Fri 8:00 am - 20:00 pm</h2>
</div>



<div class="col-sm-12 col-md-6 col-12 text-right">
    <h2 class="my-md-12">Call us: <span>(4532) 432 567</span></h2>
    
</div>




    </div>
</div>
</header>

[mdo]

Text alignment is responsive, so you can change the behavior as needed. See https://getbootstrap.com/docs/4.5/utilities/text/.

[venus222-ux]

is not working . is not center my text with call

[venus222-ux]

Please give exemple. I want to do a menu but above the menu to include the hour and the phone

[patrickhlauke]

have you tried using text-center instead of text-left and text-right?

[venus222-ux]

why center if i want to be left or right?

[venus222-ux]

i want to large device to be left and in small device to be in center all the text one above other. i try all the combination

[venus222-ux]

i have mon-wed.... as text left
call us:345 677... as text right

when i have small devive i want to be all text-center,

one above other

[adhayward]

You want to use the classes text-center text-md-left
See the following demo: https://jsfiddle.net/fuzzyexponent/tdxwoaqy/

[venus222-ux]

Thank you so much!