I am currently utilizing Bootstrap 4 for my project. I have a div that is styled with "d-flex" and it is meant to display as a row at the "lg" breakpoint (screens 1200px and above). However, on smaller devices such as mobile phones at the "sm" or "xs" breakpoints, it should behave like a column but regardless of what I try, it remains as a row.
I have attempted:
<div class="d-flex flex-sm-column flex-lg-row justify-content-lg-around">
and
<div class="d-flex flex-xs-column flex-lg-row justify-content-lg-around">
but it does not seem to work. Am I misunderstanding the way the breakpoint system functions? Perhaps I would achieve the desired result using CSS media queries instead.
Below is the complete code snippet:
<div class="w-75 my-5 mx-auto">
<h1 class="text-center my-3">Awards won</h1>
<div class="d-flex flex-sm-column flex-lg-row justify-content-lg-around">
<div class="d-flex flex-column col-sm-4 align-items-center">
<img src="./assets/award1.PNG" width="150" height="150" class="award-img">
<span> Award title </span>
<hr class="bg-dark w-50 m-0"/>
<span class="w-75 text-center text-break">Best cake made in 2019</span>
</div>
<div class="d-flex flex-column col-sm-4 align-items-center">
<img src="./assets/award2.PNG" width="150" height="150" class="award-img">
<span> Award title </span>
<hr class="bg-dark w-50 m-0"/>
<span class="w-75 text-center text-break">Winners of the national cake baking contest</span>
</div>
<div class="d-flex flex-column col-sm-4 align-items-center">
<img src="./assets/award3.PNG" width="150" height="150" class="award-img">
<span> Award title </span>
<hr class="bg-dark w-50 m-0"/>
<span class="w-75 text-center text-break">Most satisfied customers award</span>
</div>
</div>
</div>