title: How to render two columns in single column in mobile
body: <p>Bootstrap 3 table is defined as</p>
  
  <pre><code>&lt;style&gt;
  /* Override bootstrp style to make description to wrap info multiple rows in mobile */
  .details-propertyvalue {
      white-space:normal !important;
  }
  &lt;/style&gt;
  
  &lt;table class="table table-hover table-condensed table-striped"&gt;
                  &lt;tbody&gt;&lt;tr&gt;
                      &lt;td&gt;
                          Product information
                      &lt;/td&gt;
                      &lt;td class="details-propertyvalue"&gt;
  </code></pre>
  
  <p>sdofsdk sdklöfsdklö sdfklösdflök sdfkösdlökdsö sdfösdkf sdfkösdkf sdöfksdfö
  sdfksdölf sdfsdlfökö sdfösdlkf sdöfksdöflk sdfösdköfk söfsdköfskdf sdfksdö   
                      
              ... more similar tr elements
              </p>
  
  <p>In desktop screen in appears properly in two columns.
  In mobile it also appear is two columns but description column is very narrow.</p>
  
  <p>How to force it to appear in single column in mobile: first row for title and second row for description so that colum has whole bolile screen width in portrait orientation.</p>
  
  <p>Bootstrap 3 and jquery-ui are used in ASP.NET MVC4 shopping cart.</p>