I do not believe that you can achieve this solution only with CSS. Since the carousel slides are the “item” class, when it goes to the small screen, it will still have 3 item slides, but with 4 vertically folded thumbnails in each slide (the span3 content of each slide will fit into the boot classes). However, there are two workarounds.
OPTION 1 - EASIER
There are two carousels. One of them is the one you showed, and the other lowers the flash fluid and object wraps and places an element on each span3. Your original receives the hidden phone class, and the new one receives the visible-phone class. In addition, you want to omit the slide indicators in the phone version to reduce clutter for many items. Below I have included a link to the jsfiddle example. Just move the vertical frame divider in the middle to the right to resize to the width of the phone (and vice versa).
http://jsfiddle.net/guydog28/tEKg8/
OPTION 2 - HARDER
The second option is much more complicated. If you should have only one carousel, you need to go into the window resizing window to find out if you now have a phone size or a phone size larger. Then you really have to manipulate the DOM so that your carousel looks like a carousel, and then again to the size of the window. So javascript will look something like this:
$(document).ready(function () {