title: Bootstrap Column Shifting on mobile
body: <p>I am writing kind of a library management webpage in which i want to display a book collection. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="panel-body"&gt;
   &lt;div class="col-sm-3 col-md-3 col-lg-3" style="margin-bottom: 10px;"&gt;
    &lt;div class="row"&gt;
     &lt;div class="col-sm-2 col-md-3 col-lg-6" style="width: auto;"&gt;
      &lt;div style="position: relative; display:inline-block;"&gt;&lt;img src="https://cdn.pastemagazine.com/www/system/images/photo_albums/hobbit-book-covers/large/photo_5653_0-7.jpg?1384968217" style="width:auto;max-height:150px"&gt;&lt;img src="https://lh3.googleusercontent.com/ezIB-cHDLA12OTFqRavb6V9jmtX1aQZ-LqLRQ2CMprFgRjDqPP4dbo_4VVC_aAJ3WA=w300" style=" position: absolute;bottom: -10px;right: -3px;width: 30px;height: 30px;"&gt;
  
      &lt;/div&gt;
     &lt;/div&gt;
     &lt;div class="col-sm-2 col-md-3 col-lg-6"&gt;
     &lt;div class="row"&gt;Der Hobbit
      &lt;/div&gt;
      &lt;div class="row"&gt;Tolkin, J.R.R
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="col-sm-3 col-md-3 col-lg-3" style="margin-bottom: 10px;"&gt;
    &lt;div class="row"&gt;
     &lt;div class="col-sm-2 col-md-3 col-lg-6" style="width: auto;"&gt;
      &lt;div style="position: relative; display:inline-block;"&gt;&lt;img src="https://cdn.pastemagazine.com/www/system/images/photo_albums/hobbit-book-covers/large/photo_5653_0-7.jpg?1384968217" style="width:auto;max-height:150px"&gt;&lt;img src="https://lh3.googleusercontent.com/ezIB-cHDLA12OTFqRavb6V9jmtX1aQZ-LqLRQ2CMprFgRjDqPP4dbo_4VVC_aAJ3WA=w300" style=" position: absolute;bottom: -10px;right: -3px;width: 30px;height: 30px;"&gt;
  
      &lt;/div&gt;
     &lt;/div&gt;
     &lt;div class="col-sm-2 col-md-3 col-lg-6"&gt;
      &lt;div class="row"&gt;Der Hobbit
      &lt;/div&gt;
      &lt;div class="row"&gt;Tolkin, J.R.R
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="col-sm-3 col-md-3 col-lg-3" style="margin-bottom: 10px;"&gt;
    &lt;div class="row"&gt;
     &lt;div class="col-sm-2 col-md-3 col-lg-6" style="width: auto;"&gt;
      &lt;div style="position: relative; display:inline-block;"&gt;&lt;img src="https://cdn.pastemagazine.com/www/system/images/photo_albums/hobbit-book-covers/large/photo_5653_0-7.jpg?1384968217" style="width:auto;max-height:150px"&gt;&lt;img src="https://lh3.googleusercontent.com/ezIB-cHDLA12OTFqRavb6V9jmtX1aQZ-LqLRQ2CMprFgRjDqPP4dbo_4VVC_aAJ3WA=w300" style=" position: absolute;bottom: -10px;right: -3px;width: 30px;height: 30px;"&gt;
  
      &lt;/div&gt;
     &lt;/div&gt;
     &lt;div class="col-sm-2 col-md-3 col-lg-6"&gt;
      &lt;div class="row"&gt;Der Hobbit
      &lt;/div&gt;
      &lt;div class="row"&gt;Tolkin, J.R.R
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>On a small screen the columns are shifting weirdly. This is the way I want it to display:
  <a href="https://i.stack.imgur.com/tzKlV.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tzKlV.jpg" alt="image"></a></p>
  
  <p>I think that I messed up with the column classes - can anyone tell me how to fix it?</p>