title: How to rearrange bootstrap grids in extra small devices
body: <p>I have html markup like below,</p>
  
  <pre><code>            &lt;div class="row"&gt;
                  &lt;div class="col-lg-3 col-md-3 col-sm-3 col-xs-12"&gt;
                      Some contents
                  &lt;/div&gt;
                  &lt;div class="col-lg-1 col-md-1 col-sm-1 col-xs-12" &gt;
                      Some Content
                  &lt;/div&gt;
                  &lt;div class="col-lg-5 col-md-5 col-sm-4 col-xs-12"  &gt;
                      Some Content
                  &lt;/div&gt;
                  &lt;div class="col-lg-2 col-md-2 col-sm-3 col-xs-12 text-right"  &gt;
                      &lt;div class="company-add-btn"&gt;&lt;a href="#"&gt;+ Add more companies&lt;/a&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>In large display's it works fine as single row structuring four divs in columns. </p>
  
  <p>But in small displays I like to re-arrange the layout, </p>
  
  <ul>
  <li>First div will get a complete row with full width</li>
  <li>Third div will come before 2nd div and take a complete row with center aligned </li>
  <li>2nd and 4th div will take a complete row with 2nd row stays at left, and 4th floated right.</li>
  </ul>
  
  <p>Using bootstrap col-md-pull-* or col-md-push-* will just do the reordering inside a row. So that will not work.</p>
  
  <p>One possible solution will be duplicating the markup for each media break points, but Isn't there any better approach then this ? </p>
  
  <p>Can anyone suggest any way ? or point me a good place to start looking for solution ?</p>