bootstrap moving effect like marquee

Question

Question: i want to use slider effect for the bootstrap card. Here i use marquee tag fo this div "<div class="container-boxed max">" but when i checked it for responsive mobile view it displays the total cards vertically aligned. i want that same effect like desktop in mobile view also.. what can i do? please suggest me.

 

i attached screenshot for that.. 

 

 

<div class="row our-class-section">

<div class="col-md-12">

<div class="container-boxed max">

<div class="row our-class-header">

<div class="col-md-12">

<div class="text-block">

<h2 class="custom-title-home"><span class="first">Our </span>Trainings</h2>

</div>

</div>

</div>

</div>

<marquee>

<div class="container-boxed max">

<div class="row our-class-content">

<div class="col-md-12 col-sm-12">

<div class="noo-recent-class">

<div class="noo-rn-content default">

<div class="row">

<div class="loop-item col-sm-3">

<div class="item-wrap">

<div class="item-featured">

<a title="">

<img width="600" height="450" src="images/class/class_10.jpg" alt="class_10">

</a>

</div>

<div class="item-content">

<h3 class="item-title">

<a title="">IT Yoga Training</a>

</h3>

<div class="info">

<span class="time">Weekdays - 07:00am - 09:00am </span>

<span>By <em>Gunjal G.D.</em></span>

</div>

<div class="learn-more">

<a class="btn-darker" title="" href="registrationform.html">Register </a>

</div>

</div>

</div>

</div>

<div class="loop-item col-sm-3">

<div class="item-wrap">

<div class="item-featured">

<a title="">

<img width="600" height="450" src="images/class/class_12.jpg" alt="class_12">

</a>

</div>

<div class="item-content">

<h3 class="item-title">

<a title="">Technology Training</a>

</h3>

<div class="info">

<span class="time">Weekdays - 10:00am - 02:00pm </span>

<span>By <em>Sagar Supekar</em></span>

</div>

<div class="learn-more">

<a class="btn-darker" title="" href="registrationform.html">Register</a>

</div>

</div>

</div>

</div>

<div class="loop-item col-sm-3">

<div class="item-wrap">

<div class="item-featured">

<a title="">

<img width="600" height="450" src="images/class/class_14.jpg" alt="class_14">

</a>

</div>

<div class="item-content">

<h3 class="item-title">

<a title="">Meditation</a>

</h3>

<div class="info">

<span class="time">Weekdays - 03:00pm - 05:00pm </span>

<span>By <em>Pravin Sir</em></span>

</div>

<div class="learn-more">

<a class="btn-darker" title="" href="registrationform.html">Register </a>

</div>

</div>

</div>

</div>

<div class="loop-item col-sm-3">

<div class="item-wrap">

<div class="item-featured">

<a title="">

<img width="600" height="450" src="images/class/class_14.jpg" alt="class_14">

</a>

</div>

<div class="item-content">

<h3 class="item-title">

<a title="">Meditation</a>

</h3>

<div class="info">

<span class="time">Weekdays - 03:00pm - 05:00pm </span>

<span>By <em>Pravin Sir</em></span>

</div>

<div class="learn-more">

<a class="btn-darker" title="" href="registrationform.html">Register </a>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

 </div>

</div>

</marquee>

<hr class="noo-gap noo-gap-30">

</div>

</div>