title: bootstrap grid layout for mobile, tablet and desktop
body: <p>I am trying to create an easier UI for people to enter data, for a golf scoring web application. The principle is for large buttons to press for each score, rather than typing them in.</p>
  
  <p>I have created an additional CSS file to make buttons larger than the default...</p>
  
  <pre><code>.btn-sq-lg {
    width: 150px !important;
    height: 150px !important;
  }
  
  .btn-sq {
    width: 100px !important;
    height: 100px !important;
    font-size: 10px;
  }
  
  .btn-sq-sm {
    width: 50px !important;
    height: 50px !important;
    font-size: 10px;
  }
  
  .btn-sq-xs {
    width: 25px !important;
    height: 25px !important;
    padding:2px;
  }
  </code></pre>
  
  <p>Currently I have the following, which displays properly on a desktop device (Ignore the "xs" grid cells, this is me playing about. The "lg" grid cells format as I would like...)</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-xs-1 col-sm-1 col-md-1 col-lg-2 col-lg-offset-1"&gt;
          &lt;button type="button" class="btn btn-primary btn-sq"&gt;Blob&lt;/button&gt;
  
      &lt;/div&gt;
      &lt;div class="col-xs-1 col-sm-1 col-md-1 col-lg-2"&gt;
          &lt;button type="button" class="btn btn-primary btn-sq"&gt;2&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
      &lt;div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"&gt;
          &lt;button type="button" class="btn btn-primary btn-sq"&gt;3&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"&gt;
          &lt;button type="button" class="btn btn-primary btn-sq"&gt;4&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"&gt;
          &lt;button type="button" class="btn btn-primary btn-sq"&gt;5&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
      &lt;div class="col-xs-1 col-sm-1 col-md-1 col-lg-2 col-lg-offset-1"&gt;
          &lt;button type="button" class="btn btn-primary btn-sq"&gt;6&lt;/button&gt;
  
      &lt;/div&gt;
      &lt;div class="col-xs-1 col-sm-1 col-md-1 col-lg-2"&gt;
          &lt;button type="button" class="btn btn-primary btn-sq"&gt;7&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How / What is the equivalent to make the same format appear on a mobile device?</p>
  
  <p>I can use alternate (custom) button sizes as needed, just looking for a good steer for the syntax to use...</p>