Here is the code snippet I am currently working with:
<div class="col-md-9 col-md-offset-3">
<div class="row>
<div class="col-sm-4 col-sm-push-4"></div>
<div class="col-sm-8 col-sm-pull-8"></div>
</div>
</div>
The purpose of using push and pull classes in this code is to make the columns swap on mobile devices. While it functions correctly on mobile, the display on desktop is affected. Instead of appearing as intended:
https://i.stack.imgur.com/38gba.jpg
The columns seem to break out of the col-md-9 container:
https://i.stack.imgur.com/sJHka.jpg
If I remove the push and pull classes, the columns remain in place. Therefore, the issue seems to be related to their usage.
How can I prevent these columns from exceeding the boundaries of col-md-9?