in the tutorial, to make better look for mobile devices, the 2nd row was added to the grid, and column with an image was deleted, and an image automatically jumped to the new row:
And in the PC mode image still stays on the right of the text:
I thought I did the same as in tutorial, but in my case image has gone downside and do not want to go right in PC mode. What should I change?
In this example, we want to take a look at the breakpoints. These are located at the top-center of the screen. Each breakpoint can have their own styles defined, and this includes grid layouts. So, you’ll notice that in the first animation posted, the second breakpoint is selected, meaning that everything on this window size and below will look as it is designed. So, they select this breakpoint and change the grind layout to move the image below. This is again highlighted in the second animation you posted – watch how the design changes as the breakpoints change.
I can confirm that this is your issue by looking at your project. Clicking on the grid with the largest breakpoint selected shows that you only have one column present.
So, if I restore the second column, select the NEXT breakpoint, and then remove the column, you’ll notice that switching back to the first breakpoint gives you the design you expect.
Also remember that any styles you place on larger breakpoints will automatically trickle down to the smaller ones (until you apply specific styles to those), so that means that as soon as you make this change on the second breakpoint, all the others will reflect this by default.
Hope this helps! Let me know if I can answer anything else.
