Stack on mobile while semi-two-column layout on desktop using bootstrap 5

Using Bootstrap 5.2.0 - flex-column flex-md-row - but I need Section 2 (red) to come in between 1 and 3 in mobile. On desktop it’s fine.

Desktop :

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

<!doctype html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" />    

<title>flex column example</title>

</head>

<body>

<div class="container">

    <div class="d-flex flex-column flex-md-row">

        <div class="d-flex flex-column">
            <div class="bg-warning">
                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.
            </div>
            <div class="bg-primary">
                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.
            </div>
        </div>

        <div class="d-flex flex-row">
            <div class="bg-danger">
                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.
            </div>
        </div>
        
    </div>
    
</div>

</body>

</html>

You can’t really change those using flex (unless they were all exactly the same size or you use display:contents and display:grid). You can only reorder direct children of a flexbox and you have a section outside of that content.

I would simply create a custom panel in a couple if lines of grid code to do that effect.
e.g.

Much simpler.:slight_smile:

1 Like

As Amazing as always, thanks Paul !

1 Like