title: Bootstrap - Change rows and columns order
body: <p>Using Bootstrap is it possible to have these two different layouts depending on the viewport? I've been searching about this and I'm aware of the concepts <a href="https://getbootstrap.com/css/#grid-responsive-resets" rel="nofollow noreferrer">push, pull</a> and <a href="https://getbootstrap.com/css/#responsive-utilities" rel="nofollow noreferrer">responsive utilities</a> but the examples I've found had simpler structures.</p>
  <p>On this case, I rather not use responsive utilities (because there would be lots of repeated processing) and/or JavaScript, just HTML and CSS manipulation.</p>
  <p><a href="https://jsfiddle.net/mehfb6p0/" rel="nofollow noreferrer">Here's a fiddle</a> with the wrong layout on smartphones...</p>
  <pre><code>&lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;col-sm-4 elA&quot;&gt;Title A&lt;/div&gt;
    &lt;div class=&quot;col-sm-4 elB&quot;&gt;Title B&lt;/div&gt;
    &lt;div class=&quot;col-sm-4 elC&quot;&gt;Title C&lt;/div&gt;
  
    &lt;div class=&quot;col-sm-4 elA&quot;&gt;Graph A&lt;/div&gt;
    &lt;div class=&quot;col-sm-4 elB&quot;&gt;Graph B&lt;/div&gt;
    &lt;div class=&quot;col-sm-4 elC&quot;&gt;Graph C&lt;/div&gt;
  
    &lt;div class=&quot;col-sm-12 elA&quot;&gt;List A&lt;/div&gt;
    &lt;div class=&quot;col-sm-12 elB&quot;&gt;List B&lt;/div&gt;
    &lt;div class=&quot;col-sm-12 elC&quot;&gt;List C&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <blockquote>
  <p>Tablets and desktops layout</p>
  </blockquote>
  <p><img src="https://i.stack.imgur.com/iLgxL.png" alt="Tablets and desktops layout" /></p>
  <blockquote>
  <p>Smartphones layout</p>
  </blockquote>
  <p><img src="https://i.stack.imgur.com/l5zsq.png" alt="enter image description here" /></p>