Bootstrap 3 div horizontal list

Question

I have a list of horizontal divs that I cannot make them act as I want them to. What I want to achieve is have

• for md, lg, sm - a list a rectangular divs that contain a small "thumbnail" class image of any sized image and continue with the user's name horizontaly - as can be seen in the example in md view.

• for xs I want to have each entry below the other, name below the image - which should be screen size.

I could not exemplify with the image as I already used too much inline css.

http://www.bootply.com/T0AAHhHU0h

Answer 1

Unless I misunderstood your question, it looks like you're pretty close to what you're looking for... just change your col-md-3 to col-sm-3 and the switch to vertical layout will happen at xs breakpoint instead of sm breakpoint, as here: http://www.bootply.com/Ba1aGC1Lds.

<div class="col-sm-3" style="margin-bottom:20px">
  <div class="col-md-12" style="border:1px solid #C0C0C0;background-color:white">
    <div class="col-md-4" style="background-color:black;height:60px">
  </div> 
  <div class="col-md-8">
   <strong>John Smith</strong>
  </div>
</div>