Trying to keep owl carousel and side image on same line

Question

So I am setting up a basic owl carousel with an image next to it, but every time I make the page smaller, it drops the carousel to the line below it. This is where I'm at right now:

<div class="container-fluid">
    <div class="col-sm-3">
        <div>
          TEST
        </div>
    </div>
    <div class="col-sm-9">
        <div class="owl-carousel">
          <div> Your Content </div>
          <div> Your Content </div>
          <div> Your Content </div>
          <div> Your Content </div>
          <div> Your Content </div>
          <div> Your Content </div>
          <div> Your Content </div>
        </div>
    </div>
</div>

and the js is very vanilla, no css yet:

$(document).ready(function(){
  $(".owl-carousel").owlCarousel({
    loop:true,
    margin: 10,
    items: 3,
    dots: false
  });
});

How can I force the two divs to stay fixed and in equal proportion? The real goal is to have one image that floats and then three next to it that scroll.

Answer 1

Add classes to cols for xs devices:

<div class="col-sm-3 col-xs-3">

<div class="col-sm-9 col-xs-9">

Plunk