Stack on mobile while half two column layout on desktop using bootstrap 5 – HTML & CSS – SitePoint Forums

0

Using Bootstrap 5.2.0 – flex-column flex-md-row – but I need section 2 (red) to be between 1 and 3 on mobile. On desktop it is fine.

Desk :

But on mobile I need section 2 (red) in between #1 and #3 :








    

flex column example





Section 1: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Section 3: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Section 2: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.


You can’t really change which ones use flex (unless they’re all exactly the same size or you use display:contents and display:grid). You can only rearrange the direct children of a flex box and you have a section outside of that content.

I would simply create a custom panel in a few lines of grid code to do this effect.
for example

Much simpler.:slight_smile:



1 like

Always amazing, thank you Paul!



1 like

Share.

Comments are closed.