title: Bootstrap 3 responsive desktop and mobile layout
body: <p>Using bootstrap 3 to design my responsive website, I'm having trouble getting the layout to work below a desktop width resolution of 1366px v 786px. When the layout is decreased down to 1024px, it is considered the mobile breakpoint.</p>
  
  <p>How can I control when the layout switched from desktop to mobile layout?<img src="https://i.stack.imgur.com/lKclM.png" alt="1366*768 resolution">
  <img src="https://i.stack.imgur.com/8G4kp.png" alt="1024*768 resolution"></p>
  
  <p>this is my html</p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="container-fluid"&gt;
  
      &lt;div class="container-fluid header"&gt;
          &lt;div id="container"&gt;        
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row-fluid"&gt;
  
          &lt;div class="col-lg-3"&gt;
              &lt;div class="well"&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="col-lg-9"&gt;
  
              &lt;div class="col-lg-6"&gt;
                  &lt;div class="title"&gt;
                      &lt;h3&gt;title 1&lt;/h3&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="col-lg-6"&gt;
                  &lt;div class="title"&gt;
                      &lt;h3&gt;title 2&lt;/h3&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>