Displaying small responsive images with Bootstrap

Question

I'm working on a small social network king of thing and I'm struggling to display the user's profile pic along with his/her posts.

This is what I have now:

The problem is the profile's pic on the left side. First off, the "Xmas sucks..." text has been pushed down by the image (I suspect this requires the clearfix class to be fixed - problem is I couldn't get it working). Secondly, if the screen size changes, the image overflows (I think that's the term) the column width:

You can see above (IPhone 6 Plus) that the "@grinch..." line has been pushed down.

That's my code:

<div ng-repeat="post in posts | orderBy:'+':true">
  <div class="row">
    <div class="col-md-12">
      <div class="panel panel-default">
        <div class="panel-heading line-break" ng-if="post.title">
          <strong>{{post.title}}</strong>
        </div>
        <div class="panel-body line-break">
          <div class="row small-gap-row-below">
            <div class="col-md-1">
              <img src='http://localhost:50003/image/{{user.profilePicKey}}'
                   alt="Profile Picture" class="img-responsive img-rounded"
                   style="max-height: 50px; max-width: 50px;">
            </div>
            <div class="col-md-11">
                <span><strong>@{{post.username}}</strong></span>
                <small class="pull-right">18-May-2016 - 16:02</small>
              <hr class="small-margin-top"></hr>
            </div>
          </div>
          <div class="row">
            <div class="col-md-offset-1 col-md-11">
              <p froala-view="post.content"></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

As I'm using the img-responsive class, shouldn't the image be automatically resized to fit the parent? In which case, it shouldn't overflow?

I'm setting style="max-height: 50px; max-width: 50px;" because otherwise the displayed image is very small. As it says 'max-*' I'm supposing this shouldn't break responsiveness because it still is a "flexible" measure.

I suspect it's not rocket science to get this working but as I'm not experience with CSS/Bootstrap/Frontend-in-general I'm having a hard time.

UPDATE:

I've changed col-md-* to col-xs as suggested but it didn't work:

The username was placed on top of the image.

UPDATE II

Img CSS:

element.style {
    max-height: 50px;
    max-width: 50px;
}
.img-rounded {
    border-radius: 6px;
}
.carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img {
    display: block;
    max-width: 100%; (not applied!)
    height: auto;
}

img {
    vertical-align: middle;
}
img {
    border: 0;
}
* {
    -webkit-box-sizing: border-box; (not applied!)
    -moz-box-sizing: border-box; (not applied!)
    box-sizing: border-box;
}
Inherited from body.ng-scope
body {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
    background-color: #fff;
}
Inherited from html
html {
    font-size: 10px; (not applied!)
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
html {
    font-family: sans-serif; (not applied!)
    -webkit-text-size-adjust: 100%; (not applied!)
    -ms-text-size-adjust: 100%;
}
Pseudo ::before element
:after, :before {
    -webkit-box-sizing: border-box; (not applied!)
    -moz-box-sizing: border-box; (not applied!)
    box-sizing: border-box;
}
Pseudo ::after element
:after, :before {
    -webkit-box-sizing: border-box; (not applied!)
    -moz-box-sizing: border-box; (not applied!)
    box-sizing: border-box;
}

UPDATE III

Using col-xs-* along with col-sm-* as suggested:

A gap between the profile pic and the username (@grinch) appeared. Also the post content has been pushed to the left.

Answer 1

Try changing to this instead, so that it doesn't collapse. Putting col-md-xx means it will break to 100% width for small devices.

           <div class="col-xs-3 col-sm-1">
              <img src='http://localhost:50003/image/{{user.profilePicKey}}'
                   alt="Profile Picture" class="img-responsive img-rounded"
                   style="max-height: 50px; max-width: 50px;">
            </div>
            <div class="col-xs-9 col-sm-11">
                <span><strong>@{{post.username}}</strong></span>
                <small class="pull-right">18-May-2016 - 16:02</small>
              <hr class="small-margin-top"></hr>
            </div>