title: In bootstrap grid system how would I transform a column into a row on some viewport
body: <p><strong>What I am trying to do?</strong></p>
  
  <p>On > 580px viewport I have a row in the footer with three columns and On &lt;= 580px I want to have only two columns and want the last column to be transformed into a new row. I realised this can only be done with jQuery.</p>
  
  <p><strong>What Is the problem ?</strong></p>
  
  <p>For some reason bootstrap seems to add padding-right to the body on &lt;= 580px. </p>
  
  <p><strong>What I have tried ?</strong></p>
  
  <ol>
  <li>I tried adding negative padding and margin.</li>
  <li>Tried to place the new row inside a container.</li>
  </ol>
  
  <p><strong>My Code:</strong></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-js lang-js prettyprint-override"><code>var extraSmallDeviceReached = false;
  
  function adjustFooterOnMobile() {
  
    function toDefault() {
      $('.follow, .resources').removeClass('col-xs-6');
      $('.briefDescrp').removeClass('row');
      $('.briefDescrp div').removeClass('col-xs-offset-1 col-xs-11');
      $('.follow, .resources, .briefDescrp').addClass('col-xs-4');
    }
  
    function onExtraSmallDevices() {
      $('.resources, .follow, .briefDescrp').removeClass('col-xs-4');
      $('.resources, .follow').addClass('col-xs-6');
      $('.briefDescrp').addClass('row');
      $('.briefDescrp div').addClass('col-xs-offset-1 col-xs-11');
    }
  
    if ($(window).width() &lt; 581) {
      onExtraSmallDevices();
      extraSmallDeviceReached = true;
    } else if (extraSmallDeviceReached)
      toDefault();
  }
  adjustFooterOnMobile();
  $(window).resize(function() {
    adjustFooterOnMobile();
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"&gt;&lt;/script&gt;
  
  &lt;footer&gt;
    &lt;div class="container-fluid"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-xs-4 resources"&gt;
          &lt;h3&gt; Resources &lt;/h3&gt;
          &lt;ul class="list-unstyled"&gt;
            &lt;li&gt; &lt;a href="#"&gt;&amp;nbsp; a &lt;/a&gt; &lt;/li&gt;
            &lt;li&gt; &lt;a href="#"&gt;&amp;nbsp; b &lt;/a&gt;&lt;/li&gt;
            &lt;li&gt; &lt;a href="#"&gt;&amp;nbsp; c &lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;div class="col-xs-4 follow"&gt;
          &lt;h3&gt; Follow &lt;/h3&gt;
          &lt;ul class="list-unstyled"&gt;
            &lt;li&gt;
              &lt;a href="#"&gt; &amp;nbsp; x &lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;a href="#"&gt;&amp;nbsp; y &lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;a href="#"&gt;&gt; &amp;nbsp; z &lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;div class="col-xs-4 briefDescrp"&gt;
          &lt;div&gt;
            &lt;h3&gt; Brief Description &lt;/h3&gt;
            &lt;hr&gt;
            &lt;p&gt;&lt;strong&gt; efgh.&lt;/strong&gt;&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/footer&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any help would be highly appreciated. </p>