Change order of cols with push and pull Bootstrap
<p>I just discovered the "push" and "pull" classes in Bootstrap, but am having a lot of trouble implementing them the way I'd like. On XS screens, my content appears as follows, which is correct:</p>

<pre><code>|A||B||C|
</code></pre>

<p>But on SM screens, I need it to be:</p>

<pre><code>|B|
|C|
|A|
</code></pre>

<p>My HTML is below. I tried adding "col-sm-push-10" to the div that contains my button, but that just pushed it to the right within it's own div. I need to actually MOVE this div down. Any help would be much appreciated!!</p>

<pre><code>&lt;div class="container-fluid"&gt;
    &lt;div class="col-sm-4"&gt;
       &lt;ul class="prod-group"&gt;
         &lt;div class="col-xs-2 col-sm-10"&gt;
            &lt;li&gt;&lt;button type="button" class="btn"&gt;A&lt;/button&gt;&lt;/li&gt;
          &lt;/div&gt;
          &lt;div class="col-xs-6 col-sm-10"&gt;
            &lt;li&gt;B&lt;/li&gt;
           &lt;/div&gt;
           &lt;div class="col-xs-4 col-sm-10"&gt;
              &lt;li&gt;Cr&lt;/li&gt;
           &lt;/div&gt;
        &lt;/ul&gt;    
     &lt;/div&gt;
</code></pre>