Bootstrapde altlı üstlü ama altta olan üste olacak şekilde nasıl yaparım?

<div class="carousel-inner">
    <div class="carousel-item active">
        <div class="container">
            <div class="row">
                <div class="col-xl-6 col-12 m-auto" style="color: white;">
                    <p class="carousel-heading">Başlık böyle</p>
                    <p class="carousel-subject">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis est pariatur atque accusantium quas nam non repellendus molestiae sapiente libero! Veritatis fuga molestias ullam dolorem dolor sed dignissimos repellat sit.</p>
                </div>
                <div class="col-xl-6 col-12">
                    <img src="https://wallpaperaccess.com/full/2161330.jpg" class="lazyloaded" alt="">
                </div>
            </div>
        </div>
    </div>
...

Masaüstünde yan yana, mobilde üst üste gözükmesini istiyorum ama resim üste gelecek şekilde. Bunu css de

@media (m-w: 768px){
  .class{
    display: none;
  }
  .class2{
    display: block;
  }
}

böyle yapmadan nasıl halledebilirim?
Örnek olarak ideasoft' un anasayfasındaki carousel gibi.