title: Change classes of item divs inside bootstrap `row` class div on click
body: <p>This code is used to define a bootstrape <code>row</code> class on a div: </p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;br /&gt;
      &lt;div class="col-sm-4 rowitem" id="Snacks"&gt;
          &lt;a href="#"&gt;
               &lt;img src="~/XImages/snacks.png" /&gt;
           &lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-4 rowitem"&gt;
           &lt;img src="~/XImages/baby.jpg" /&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-4 rowitem"&gt;
           &lt;img src="~/XImages/personal-care.jpg" /&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-4 rowitem"&gt;
           &lt;img src="~/XImages/beverages.jpg" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Using jQuery, I need to change all item divs with class <code>col-sm-4</code> to <code>col-sm-1</code> when div with <code>col-sm-4</code> class is clicked. </p>
  
  <p>Can someone please guide. Thanks in advance. </p>