title: Responsive table not changing at high enough browser width
body: <p>I have a table which uses bootstrap:</p>
  
  <pre><code>&lt;table class="table table-bordered"&gt;
                              &lt;tr&gt;
                                  &lt;th class="text-center" colspan="4"&gt;
                                      DRUG INFO
                                  &lt;/th&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                  &lt;td class="col-md-3"&gt;&lt;span&gt;{{item.fields[18].displayName}}&lt;/span&gt;&lt;/td&gt;
                                  &lt;td class="col-md-3" colspan="2"&gt;&lt;span&gt;{{item.fields[25].displayName}}&lt;/span&gt;&lt;/td&gt;
                                  &lt;td class="col-md-3"&gt;&lt;span&gt;{{item.fields[14].displayName}}&lt;/span&gt;&lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                  &lt;td&gt;
                                      &lt;div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[19].htmlName)" data-strat-model="item" data-field="item.fields[18]"&gt;&lt;/div&gt;
                                  &lt;/td&gt;
                                  &lt;td colspan="2"&gt;
                                      &lt;div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[26].htmlName)" data-strat-model="item" data-field="item.fields[25]"&gt;&lt;/div&gt;
                                  &lt;/td&gt;
                                  &lt;td&gt;
                                      &lt;div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[15].htmlName)" data-strat-model="item" data-field="item.fields[14]"&gt;&lt;/div&gt;
                                  &lt;/td&gt;
  
                              &lt;tr&gt;
                                  &lt;td colspan="2"&gt;UD_UU_PKG&lt;/td&gt;
                                  &lt;td colspan="2"&gt;SHORT_CYCL&lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                  &lt;td colspan="2"&gt;
                                      &lt;div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[52].htmlName)" data-strat-model="item" data-field="item.fields[52]"&gt;&lt;/div&gt;
  
                                  &lt;/td&gt;
                                  &lt;td colspan="2" class="text-center"&gt;
                                      &lt;div data-strat-form-control data-field-display-id="20" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[53].htmlName)" data-strat-model="item" data-field="item.fields[53]"&gt;&lt;/div&gt;
                                  &lt;/td&gt;
                              &lt;/tr&gt;
  
                          &lt;/table&gt;
  </code></pre>
  
  <p>My issue is that this table's responsive attributes are not fixing the layout early enough (and a high enough pixel width).</p>
  
  <p>As the width reduces the table is supposed to move to the bottom of the page for responsive design like this:</p>
  
  <p><a href="https://i.stack.imgur.com/WBybb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WBybb.png" alt="enter image description here"></a></p>
  
  <p>But there is a windows of width where this doesn't happen and the table overlaps it's parent:</p>
  
  <p><a href="https://i.stack.imgur.com/ZGEsB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZGEsB.png" alt="enter image description here"></a></p>
  
  <p>I have been looking for custom media queries but there aren't any for this section. I have also been working with column widths but reducing them makes the problem worse for some reason.</p>
  
  <p>How would I fix this issue?</p>