[SOLVED] Bootstrap: Reversing columns makes them stacked

Bootstrap: Reversing columns makes them stacked

I am trying to get the 'second' and 'third' columns to be sat next to each other whilst also reversing the order of them for the MD breakpoint

<body>
        <div class="row flex-md-column-reverse">
            <aside class="col-6">
                <div class="border-top">
                    <h1>Third</h1>
                </div>
            </aside>
            <div class="col-6"><h1>Second</h1></div>
            <section class="col-12">
                <h1>First</h1>
            </section>
        </div>
    </body>

I applied flex-md-column-reverse but it makes them stack ontop of each other

Solution

You can play around with order:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="row">
   <aside class="col-6 order-md-3">
     <div class="border-top">
       <h1>Third</h1>
     </div>
   </aside>
   <div class="col-6 order-md-2"><h1>Second</h1></div>
   <section class="col-12">
     <h1>First</h1>
   </section>
</div>