6 Keyfacts/ 3 columns 2 rows on mobile and tablet

I have 6 keyfacts in 2 rows and I am trying to apply this tutorial https://joshhall.co/how-to-keep-columns-on-mobile-in-divi/

so the code i added in custom ccs is this


@media only screen and (max-width: 980px) {
.three-columns .et_pb_column {
width: 33%!important;
}
}

@media only screen and (max-width: 479px) {
.three-columns .et_pb_column {
width: 50%!important;
}
}

I also added "display: flex;" for tablet and mobile view in the Advanced settings Tab (applied to the row)

Row height is defined to 230px across all devices

Is it possible to have 2 columns and make the second row float to the left just on mobile?

Please note also there's a difference on how the section looks like in the backend editing and when visited not as an editor squeezing the browser. Which one I should consider best?

In order to distance the modules/elements if needed do I need to work in detail on each of the across all divices?

Else the sections has an awful overlapping with the section below, a section title with radial fading.
How is that possible? On desktop there's no section overlapping. How can i fix it?

 

I switched to 8 keyfacts in total which had a css already setup and it works. still interesting of there are solutions for the 6 columns, thanks