I am trying to display text alongside an image. I want it to stack only when the device is below 767px wide. Otherwise, I want them to be side by side.
During this stacking, the image is responsive so it takes up and entire row above the text. To avoid this, I tried to limit the size of the column when it is xs. This makes sure the image is within the specified column size.
Now I want to center the image. I tried to use the offset method but it's forcing them to stack at all resolutions. 

Here is the code and the [fiddle](http://jsfiddle.net/hhbuqqvy/4/)

```
<div class="container">
<div class="row">
    <div class="col-xs-12 col-sm-4 col-lg-4">
        <img
            src="https://c1.staticflickr.com/3/2813/9093733888_79ccacf171_z.jpg"
            alt="pic" class="img-responsive img-circle">
    </div>
    <div
        class="col-xs-12 col-sm-6 col-sm-offset-2 col-lg-6 col-lg-offset-2 text-center">
        <h3>Hello World!</h3>
        <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa
            qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>
</div>

```

In the above code, as you can see, the image is taking full width on small devices

`<div class="col-xs-12 col-sm-4 col-lg-4">`

One way to reduce the size of the image is the reduce the column size. So the above line is changed to

`<div class="col-xs-4 col-sm-4 col-lg-4">`

This occupies the left half of the screen. So to center it I added an offset.

`<div class="col-xs-4 col-xs-offset-4 col-sm-4 col-lg-4">`

This words fine for xs resolution but the two columns get stacked at higher resolutions (sm, lg) as well. 

I'm fairly new to bootstrap, css, html etc. So I might be missing something very obvious here. I couldn't find any relevant solution in this specific case so any help/insight is appreciated.