title: Laravel + Bootstrap - Keep Sidebar Side by Side with content
body: <p>I'm using Laravel + bootstrap with the columns/rows . </p>
  
  <p>However when i use a smaller screen . The sidebar is placed on top and the content below . </p>
  
  <p>I want both of them to remain in their positions and become smaller instead . </p>
  
  <p>This is how i want it to look both on desktop &amp; phone/tablets</p>
  
  <p><img src="https://i.imgur.com/8s73Cg5.png" alt="i1"></p>
  
  <p>This is how it appears on the phone however :</p>
  
  <p><img src="https://i.imgur.com/K6ZSH5b.png" alt="i2"></p>
  
  <p>Is there any way to fix them side by side and yet keep them responsive like laravel &amp; bootstraps intends.</p>
  
  <p>This is the basic layout.</p>
  
  <pre><code>&lt;div id="container-fluid"&gt;
  
                  &lt;div class="container"&gt;
  
                      &lt;div class="col-sm-12"&gt;
  
                          &lt;div class="col-sm-3"&gt;
  
                              @yield('sidebar')
  
                          &lt;/div&gt;
  
                          &lt;div class="col-sm-9"&gt;
  
                              @yield('content')
  
                          &lt;/div&gt;
  
                      &lt;/div&gt;
  
                  &lt;/div&gt;
  
              &lt;/div&gt;
  </code></pre>