JSFiddle - React, Tailwind, and code Playground

by locally

HTML

<div class='carousel-inner'>
    <div class="carousel-caption">
         <h2 class=" ">
                                        Its Worth it                                    </h2>

        <p class=" ">The food and service were amazing. We had the nine course tasting menu which was a full evenings entertainment. wine recommendations were great. Expensive but definately worth a visit for a special occasion.</p>
    </div>
</div>

CSS

.carousel-inner {background: #ebebeb;min-height: 23px; width: 100%;}

JavaScript

jQuery(function( $ ) {
  
    
    
  var eventFired = 0;
  var mediaWidth = 600;

if ($(window).width() < mediaWidth) {
    $( ".carousel-caption" ).insertAfter( $( ".carousel-inner" ) );
    eventFired = 1;
}


$(window).resize(function() {
    if (!eventFired) {
        if ($(window).width() < mediaWidth) {
            $( ".carousel-caption" ).insertAfter( $( ".carousel-inner" ) );
            eventFired = 1;
        } 
    }
});  
    
});

// this doesn't work as it is one way only