• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
3

side by side content in a section for desktop vs. visual hierarchy of same content for mobile

Enthusiast ,
Oct 18, 2023 Oct 18, 2023

Copy link to clipboard

Copied

Hi,

 

I am wondering how, structurally, I can take control and alter the visual hierarchy if a section is split with text on left and image on right... but when collapsed for mobile, default means all is stacked in a single column in that order. e.g. text appears first, then the image.

I would like to alter this so that the image winds up on top of the text and ensure it indeed pushes down the text (boundary box) so that the image does not wind up floating on top of the text.

 

Any reference or resources for this you can bring to my attn?

 

Thank you.

TOPICS
Bootstrap , Code , How to

Views

114

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 18, 2023 Oct 18, 2023

Copy link to clipboard

Copied

Reordering columns with Bootstrap Order Classes.

https://getbootstrap.com/docs/5.0/layout/columns/#reordering

 

Only with a URL to your online page can we give you concrete code examples.

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 18, 2023 Oct 18, 2023

Copy link to clipboard

Copied

LATEST

Bootstrap is MOBILE FIRST.  Tablet & desktop are secondary.

Order the structure exactly how you want it to display on mobile.

 

Then add classes for tablets & desktops.

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines