CODEWITHSUNDEEP
cssbootstrap-5
Surf22
Surf22

Reputation: 13

Bootstrap - change table layout on mobile

So on desktop I want 4 columns with an image above the text like the first image (so col-3), very easy. (I have the image and text in the same col)

enter image description here

but on mobile I want the icon appear on the left and the text on the right as per the second image.

enter image description here

i have tried floating the image lleft and the text right but that doesnt work I tried splitting the image and the text but they won't line up properly on all screen sizes if i do. This feels like it should be so easy but my brain is stuck.

Upvotes: 0

Views: 680

Answers (2)

satira
satira

Reputation: 26

You can try using Flex instead of floating divs for the div that contains col class

See here an example - https://playcode.io/995433 (Try to resize the playground viewport to see the mobile layout). I hope this is what you need. I've used BS inline classes for convenience.

Upvotes: 1

Marin Spudić
Marin Spudić

Reputation: 41

Bootstrap align div horizontal to vertical on responsive There is your reference

Upvotes: 0

Related Questions