Bootstrap columns not working on ios devices as they should - html

Question

I have made a card using bootstrap. The columns work fine in all the devices. But they completely change in any ios devices. Screenshot attached.
http://projecttesting.tk/sfl/test.html
is my card on test server.
Fiddle: https://jsfiddle.net/Lhjm8ztn/
<section class="card__list row">
<div class="card__box col-md-12 col-sm-12">
<div class="card">
<div class="card__content">
<div></div>
<div class="ribbon"><span>Sponsored</span></div>
<div class="row card__bottom2">
<div class="col-6 col-sm-4 col-md-8 contest">
<img src="index.png" width="25px" height="25px"> <span class="card__title">MyTeam11</span>
<div class="date2">
<span class="time"> (2 Minutes Ago) </span>
</div>
</div>
<div class="col-3 col-sm-4 col-md-2 center3 card__price">
<span class="card__title">66%</span>
<div class="date">
Overlay
</div>
</div>
<div class="col-3 col-sm-4 col-md-2 center3 card__price">
<span class="card__title">25%</span>
<div class="date">
Margin
</div>
</div>
</div>
<div class="row card__bottom">
<div class="col-6 col-sm-4 col-md-4 col-lg-2 left options">
<span class="date weight">
1.6 Million Monster
</span>
<div class="date2">
43.6 % Overlay
</div>
</div>
<div class="col-6 col-sm-4 col-md-4 col-lg-2 center card__price">
<span class="date weight"> ₹ 1600000</span>
<div class="date2">
Prizepool
</div>
</div>
<div class="col-6 col-sm-4 col-md-4 col-lg-2 right left2 card__price">
<span class="date weight"> 55555</span>
<div class="date2">
Max Entries
</div>
</div>
<div class="col-6 col-sm-4 col-md-4 col-lg-2 left center2 card__price">
<span class="date weight"> ₹ 35</span>
<div class="date2">
Entry Fee
</div>
</div>
<div class="col-6 col-sm-4 col-md-4 col-lg-2 center left2 card__price">
<progress id="pb0" value="620" max="1760"></progress>
<div class="date2">
620/1760 Joined
</div>
</div>
<div class="col-6 col-sm-4 col-md-4 col-lg-2 center2 right card__price">
<div class="date2">
<button type="button" class="btn btncs btn-primary">Join Now</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
I have tried to change the display property but it was not helpful.

Answer 1

add below code at the end of your css code i hope this should work in ios all sizes
#media(min-width:320px) and (max-width:1024px){
.left2 {
text-align: left !important;
}
.card__price {
text-align: right !important;
}
.left2 {
text-align: left !important;
}
}