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