Help for displaying image and text differently on desktop and mobile

[yannrapaport]

Hi,

I am new to HTML and CSS.

I am trying to build a homepage on shopify using the Brooklyn theme which takes advantage of your grid framework.

I would like to have 4 sections with an image and some text each, appearing as follows on a desktop:

img1 | text1
text2 | img2
img3 | text3
text4 | img4

and as follows on mobile:

text1
img1
text2
img2
text3
img3
text4
img4

I have tried to use push and pull classes without success. Here is my code:

<div class="grid">
 <div class="grid__item one-half push--medium--one-half push--large--one-half small--one-whole">
 <p>text1</p>
 </div>
 <div class="grid__item one-half pull--medium--one-half pull--large--one-half small--one-whole">
 <img src="/path/to/img1"/>
 </div>
</div>
<div class="grid">
 <div class="grid__item one-half small--one-whole">
 <p>text2</p>
 </div>
 <div class="grid__item one-half small--one-whole">
 <img src="/path/to/img2"/>
 </div>
</div>

With this code, text1 and img1 both appear overlapping on the right half of the screen... It works well with text2 and img2, likely because they appear in the same order as in the HTML...

Am I missing something?

Thanks in advance for your help!

Yann