Can anyone help me create an income statement div with three elements that has a responsive layout? I want these elements to change from a horizontal display to a vertical one when there is limited space, especially on medium width screens.
The initial layout should look like this:
+10,000 Supported Companies +14 Countries Served +250 Million Managed
Once the medium device width is reached, I need the layout to switch to:
+10,000 Supported Companies
. +14 Countries Served
. +250 Million Managed
I want to avoid having an intermediate layout where elements are split unnaturally. I've tried using the following CSS settings but haven't been successful:
Any advice on achieving this desired behavior would be greatly appreciated. Thank you!
#results-1 {
width: 100%;
gap: 1rem;
padding: -10px -10px 0.7rem 1.8rem;
}
#results-2 {
gap: 3.5rem;
font-weight: bold;
font-size: 1.5em;
margin-right: 29px;
padding-right: -20px;
text-decoration: underline 5px;
}<div className=' d-flex flex-column' id='results-1'>
<div className=" d-flex justify-center" id="results-2">
<span id="emp" className='col-10 col-sm-4 col-md-4 col-lg-4'> +10,000 Supported Companies </span>
<span id='paiat' className='col-10 col-sm-4 col-md-4 col-lg-4'>+14 Countries Served </span>
<span id='money' className='col-10 col-sm-4 col-md-4 col-lg-4'>+250 Million Managed </span>
</div>
</div>