differrent alignment on mobile

Question

Hello

This section of my website shows on desktop like this:

https://imgur.com/eiKdY3p

And In mobile like this:

https://imgur.com/nSfOYWe

I would like to show it on mobile like this:

https://imgur.com/nDDeHCn

ALL Images: https://imgur.com/a/PvfrXvi

SemiColonWeb · Accepted Answer

Hello,

You will need to add the Margins manually for spacing on Mobile Devices using the Margin Spacing Utility Classes: https://getbootstrap.com/docs/4.5/utilities/spacing/ .

Or, you can also add Gutters and Bottom Margins to the .row DIV:

<div class="row align-items-md-center gutter-40 mb-5">

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

ibergag · Answer

Hey,

Thanks for the help.
I think you misunderstood me. i wanna change the placement of the image on the mobile version that the image of the second paragraph will be above the text and not under.

Thanks

SemiColonWeb · Answer

Hello,

Thanks for the complete explanation on this. You can simply add your Image on the Left by default in the HTML Codes and then use the .flex-sm-row-reverse Class on the .row DIV to reverse the Row Items from Smaller Devices. Example:

<div class="row flex-sm-row-reverse align-items-center mt-5">

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

ibergag · Answer

It did work Thanks