On the card, change d-sm-flex to d-flex.
d-sm-flex is not getting triggered on breakpoints below 576px, which happens to be most Portrait oriented mobile devices. Also, you don’t want flex-wrap set, at least for mobile, since you seem to want the content side to stay to the right and not stacked beneath
It looks like you already have it below the card within the
card-footer, which automatically uses text-align right across all breakpoints. Is this not what you want? From a UI standpoint, user behavior is more inclined to right-aligned buttons hence why the hamburger is on the right side.
For tablet+, IMO having the request link below is also acceptable. But you do have a lot of horizontal real-estate to use so you could get away with the following adjustment:
I would also recommend that if you make any CSS selector adjustments, don’t make them directly on the
.card selector. Add another CSS class to these specific cards, like
<div class="card card--song" />, so that you don’t override the global
.card styling provided by bootstrap and instead override it at a component level (