I am trying to set 3 divs to the right of the screen, stacked horizontally, just to be stacked vertically on small screen. justify-content-end works perfectly on parent div until I use col-sm in children, then I lose the justification. Why would col-sm dismiss the use of justification? How can I solve this?
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<div class="d-flex justify-content-end">
<div class="order-1 p-2">Some action 1</div>
<div class="order-2 p-2">Another action 2</div>
<div class="order-3 p-2">Triple divs 3</div>
</div>The code above works and justifies perfectly, but does not set items vertically stacked on small screens. The code below must do it but it just won't!
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<div class="d-flex justify-content-end">
<div class="order-1 p-2 col-sm">Some action 1</div>
<div class="order-2 p-2 col-sm">Another action 2</div>
<div class="order-3 p-2 col-sm">Triple divs 3</div>
</div>