How to organize content for mobile and desktop so as not to harm the SEO?

Question

css

I'm laying out a landing page. No frameworks. I have a block of this kind:

On the mobile version, I need to do this:

At the moment, I have two blocks on the page with the same information only with a different structure, one is shown at max-width: 599, and the other at min -width: 600.
Please tell me how this will affect SEO, how will search engines react to this? And how can you do it better? Thank you.
I use SCSS and Parcel.

Answer 1

Media queries will allow you to control the location of blocks depending on the screen width. If you build based on the mobile view, then for the desktop you can collect a style for each odd line with a change in order, there are many options for implementation, you can use flex. The main thing is that the order in the markup will not change, the content will not have to be duplicated.