How do I create a responsive hero section with two columns that swap order on mobile?

Asked on Jun 12, 2025

1 Answer

To create a responsive hero section with two columns that swap order on mobile, you can use Bootstrap's grid system and responsive utilities. Here's how you can achieve this:

<!-- BEGIN COPY / PASTE -->
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6 order-md-2">
                    <h1>Hero Title</h1>
                    <p>This is a description for the hero section.</p>
                </div>
                <div class="col-md-6 order-md-1">
                    <img src="image.jpg" alt="Hero Image" class="img-fluid">
                </div>
            </div>
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

Use the `container` class to wrap your content for responsive padding.
The `row` class creates a horizontal group of columns.
`col-md-6` specifies that each column should take up half the width on medium screens and larger.
`order-md-2` and `order-md-1` are used to swap the order of the columns on medium screens and up.
The `img-fluid` class ensures that the image scales properly with the column.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions