How to keep bootstrap modal at bottom of viewport for mobile - modal is bottom-right for desktop but stays top in mobile viewports

Question

I am trying to display a bootstrap modal at bottom-right in desktop viewports and centered-bottom for mobile.

I am using position:fixed and bottom: 0; which works for desktop viewports but my modal displays top-center in mobile instead of bottom.

Any tips on using media queries or otherwise to keep my modal at bottom for mobile viewports?

Thank you for your time.

I believe I need to wrap the modal in a div or use media queries to position the modal in mobile viewports but haven't been able to get anything working correctly beyond my current code which satisfies all of my requirements besides displaying the bootstrap modal at bottom for mobile viewports.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<style>@media only screen and (min-width: 768px) {
 .modal .modal-dialog {
 position:fixed;
 bottom: 0;
 right:0;
 width:auto;
 margin: 10px;
 }
 @media only screen and (max-width: 768px) {
 .modal .modal-dialog {
 position:fixed;
 bottom: 0;
 right:0;
 width:auto;
 margin: 10px;
 }
}</style>


<div id="myModal" class="modal fade" role="dialog">
 <div class="modal-dialog">

 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal">&times;</button>
 <h4 class="modal-title">Modal Header</h4>
 </div>
 <div class="modal-body">
 <p>Some text in the modal.</p>
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 </div>
 </div>

 </div>
</div>


<script> $(window).load(function(){
 $('#myModal').modal('show');
 });
$(function(){
 $('#myModal').on('show.bs.modal', function(){
 var myModal = $(this);
 clearTimeout(myModal.data('hideInterval'));
 myModal.data('hideInterval', setTimeout(function(){
 myModal.modal('hide');
 }, 3000));
 });
});
</script>

So far I cannot effectively lock the modal to bottom in mobile viewports.