I'm working with this div from the Bootstrap framework:
<div class="card-header py-md-0 py-lg-0 py-xl-0 pl-0 pr-0">
<div class="d-flex justify-content-between align-items-center">
<div class="h5 mb-0">Text text</div>
<div class="text-right">
<div class="actions">
<a href="#" class="action-item"><i
class="far fa-heart mr-1"></i>
50</a>
<a href="#" class="action-item"><i class="far fa-eye mr-1"></i>
250</a>
</div>
</div>
</div>
<p class="font-size-1">Text text text text text
</p>
</div>
For medium and small devices, I need the second div with class="actions" to move above the first one and be aligned to the left.
I've attempted the following CSS code without success. Is there something crucial that I might be overlooking?
@media only screen and (max-width: 960px) {
.col-xs-12 {
display: flex;
flex-direction: column-reverse;
}
}
Any pointers or suggestions would be greatly appreciated. Thank you!