title: Bootstrap table resize/reorganize for col-sm
body: <p>I'm new in Bootstrap and tables and I have a table that I've been using it as legend for a chart:</p>
  
  <pre><code>&lt;div class="col-md-4 col-sm-12" id="chart1" style="display:none; border: 1px solid lightgray; padding-top:2%"&gt;
      &lt;h3 style="text-align:center"&gt;&lt;b&gt;MY CHART&lt;/b&gt;&lt;/h3&gt;
      &lt;div id="chart" style="width:100%; min-height:500px"&gt;&lt;/div&gt;
      &lt;div id="myLegend" style="width:70%; height:40px;  margin: 0 auto;" class="row"&gt;
         &lt;table style="font-size:18px; color:#545454"&gt;
            &lt;tbody&gt;
                &lt;tr&gt;
                   &lt;td&gt;
                      &lt;div style="border:1px solid #ccc; padding: 1px"&gt;
                           &lt;div style="width:4px; height:0; border: 5px solid rgb(145,207,80); overflow: hidden"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                   &lt;/td&gt;
                   &lt;td&gt;First Val&lt;/td&gt;
                   &lt;td&gt;
                      &lt;div style="border:1px solid #ccc; padding: 1px"&gt;
                           &lt;div style="width:4px; height:0; border: 5px solid rgb(112,171,70); overflow: hidden"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/td&gt;
                  &lt;td&gt;Second Val&lt;/td&gt;
                  &lt;td&gt;
                      &lt;div style="border:1px solid #ccc; padding: 1px"&gt;
                         &lt;div style="width:4px; height:0; border: 5px solid rgb(255,191,0); overflow: hidden"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/td&gt;
                  &lt;td&gt;Third Val&lt;/td&gt;
                  &lt;td&gt;
                      &lt;div style="border:1px solid #ccc; padding: 1px"&gt;
                           &lt;div style="width:4px; height:0; border: 5px solid rgb(255,0,0); overflow: hidden"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/td&gt;
                  &lt;td&gt;Forth Val&lt;/td&gt;
               &lt;/tr&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>On bigger screens the legend looks ok but when the screen is smaller but still bigger than col-sm the table gets outside the div with id <code>chart1</code> and I need it to somehow resize/reorganize into two rows to fit the div. I've tried using <code>table-responsive</code> but it adds a horizontal scroll and that's not good. 
  Is there a way to make the table content fit when the screen size changes?</p>