Bootstrap 3 Responsive Image Not Displaying Correctly

This question just didn't garner much interest, so I am closing it.

> This doesn't happen when viewing in Sublime Text 2

This is a confusing statement because there is no preview with Sublime Text.  Js playgrounds like jsfiddle or jsbin may not behave exactly as if you looked at your page in your browser for many different reasons.  

You can use your browser's console or other tools to dig into what is going on with your page.  Your page is a bit heavy at 3.5mb http://tools.pingdom.com/fpt/#!/cD8aCq/http://pricelearman.com/clients/serenaconstruction/ and that is because of your images are coming through as about a half meg each.    This one is 600kb http://pricelearman.com/clients/serenaconstruction/_img/home/slides/image03.jpg and can easily be taken down to 125kb.  If you have 5 images that size you are at about 3mb.  Bringing those down to a proper size you will be at the same total size as just one of the current images.

So the real reason the Examples Rob and I showed you behave much better may be in part by some small tweaks we made, but we are not dealing with 3mb's of data.

Another reason for "jumping" may be your break points.  Take a look at the media queries http://getbootstrap.com/css/ 

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Select allOpen in new window

Let's say you have an image that is 1000px wide.  You have code

<div class="row">
    <div class="col-sm-9">
           <img src="someimage.jpg" class="img-responsive">
    </div>
   <div class="col-sm-3">
        some text
   </div>
</div>

Select allOpen in new window

What will happen is when you are on your desktop viewing this as full screen, your image will fill up the width of it's div.  Let's say your container is 100% and the browser viewport is 1000px.  That image will resize automatically smaller to 750px.  As you narrow your browser manually, the image will continue to get smaller proportionally because I have coded it as  img-responsive.   The reason it should be at about 750px is because col-xx-9 is 75% of col-xx-12.

As you keep narrowing your viewport and lets say you are at 800px wide, that image will now be  600px wide.  However, once your viewport narrows below 768px, the column that was on the left side will now go above the column that was on the right side and they will both take up 100% width.  This means your image will jump from about 576px wide to 768px wide.

If you had <div class="col-xs-12 col-sm-6 col-md" you would have even more jumping around.

However, you have to keep in mind that the only people that will see this jumping will be the developer.  If I load this on my phone, I am not going to do anything but perhaps turn my phone portrait to landscape and back.  So there may be a jump as the entire thing reconfigures and I would expect that.  Same on my tablet.  When I am on my desktop, I typically have my browser at between 60% to 80% of my screen depending on what I am doing and how many browser screens I have open.   But I am not constantly changing the width of the my screen unless I am curious as a developer. But as an actual user, I am leaving my browser as it is.

Let's say you always keep 2 columns like below.  Now your image will continue to resize "smoothly" but for anybody reading on a phone will probably end up zooming in because the objects could be too small.

<div class="row">
    <div class="col-xs-9">
           <img src="someimage.jpg" class="img-responsive">
    </div>
   <div class="col-xs-3">
        some text
   </div>
</div>

Select allOpen in new window