One Block Display on Desktop, Two on Mobile
I'm working on a template where I want to have a kind off sidebar that would display differently on mobile. It is actually a bit hard to explain what I want do, so I'm just going to show you two images of what I want achieve.
(of course I had two different codes for each images to get the two results I wanted to have)
I'm not sure this actually possible since the idead of mobile viewing is that you have two images in a line on desktop and you only show one in mobile phone to make it redeable. What I'm trying to do here is kind of the opposite since, I want go from 2 images in 2 lines on desktop to 2 images in 1 line on mobile.
I think it might be done if the images are on the same line on the HTML code, if not I think it is never going to display on a single line in mobile view. Problem is that if you code into one line then it's going to display as one line on desktop and that's not what I want.
So my idea was to imagine the code for a wider screen than the classic desktop mode with 600px width.
Let's imagine we work for a 920px screen: I can now have on the same line 350px of text + 150px of an image + 150 px of another image.
Then when I watch the mail on a 600 width screen it would keep the 350px text and the first image on the first line and since the next image won't fit in the first line, it would be display on the next line.
Last, on my 320px mobile phone I would have my 350px text recising to 320px on the first line and on the second line I would have the two 150 px images.
Well, I've tried a bit doing this and that but I can't find a way to translate my idea into code, I'm really new to HTML... Is this possible? Can anyone could tell me how to do that?
Btw, I would love to post my code but I don't see how I can do it without adding manually four spaces to each lines. (since there are hundreds lines)
Thank you for your time! :)