I recently designed a gratitude page for my e-commerce website using Groovy and Grails. Below is the code snippet of the page where I incorporated Bootstrap classes.
https://i.sstatic.net/TJ0yf.png
<div class="col-md-12 col-sm-12">
<div class="panel panel-default">
<div class="panel-body">
<div class="col-md-12 col-sm-12">
<h3>Thank you for your Order!</h3>
<br/>
<br/>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<h5>Your Order Number is : 123456</h5>
</div>
</div>
<br/>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
// some backend code
</div>
</div>
<br/>
<div class="clearfix"></div>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12" id="btnOrderSummary">
<a class="btn btn-primary pull-left float-none"
style="margin: 5px">
View Order Summary
<i class="fa fa-files-o"></i></a>
<a class="btn btn-primary pull-right float-none"
style="margin: 5px"> Home
<i class="fa fa-home "></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
When viewing the page in responsive mode, such as on an iPhone X,
https://i.sstatic.net/HtWDt.png
What specific modifications should I apply to the CSS or bootstrap to ensure responsiveness across all mobile devices?