How to change flow of information for mobile

I made a loom video to explain what it is that I am trying to achieve.

Thanks so much!

Here is my site Read-Only:

So you could set your content div to width 100% on mobile which produces this:

This should work just fine, but one recommendation would be to use flexbox for your parent container of this icon and content, which will give you better control for positioning at different breakpoints. So the structure would look like this (ignore the class names, this is an example I have):


With “Feature” being the flex parent, and Feature Icon and Feature Content being the children. By using flex you can control width, alignment and positioning more easily.

Grid adds extra control as well, but I would start with flex in this scenario.