Bootstrap - 列叠加

Question

在我看来，我会显示一个带有窗格的PDF，该窗格浮动到左侧以显示PDF的标签。该空间包含一个表，每个标记都有一行。我希望表保持在列内（响应性地）独立于表的列中的内容。问题是当浏览器宽度减小时，带有PDF的列将浮动在带有窗格的列上。

更新：不确定是否相关，但我使用Rails 5。

该应用程序使用vanilla bootstrap，这是我的html：

<div class="container-fluid">
<div class="row">
    <div class="col-md-4">
        <div data-spy="affix">
            <%= simple_form_for([@annotation, @annotation.tags.build], html: { class: 'form-vertical', multipart: true }) do |f| %>
                <%= f.button :submit, 'Add tag' %>
                <%= link_to 'Close', annotation_path(@annotation), :class => "btn btn-default" %>
                <%= link_to 'List' , annotations_path, :class => "btn btn-default" %>
                <br><br>
                    <%= f.error_notification %>
                    <%= f.input :content, placeholder: 'Annotated content', label: false %>
                    <%= f.input :location, :as => :hidden, :input_html => { :value => 'x=0, y=0' }, label: false %>
                    <%= f.association :tagtype, prompt: 'Select tag type', label: false %>
            <% end -%>
            <div class="panel panel-default" id="annotationResults">
                <table id="tags" class="table table-hover" style="background-color: white; word-wrap: break-word; font-size: 0.9em;" >
                    <thead>
                        <tr>
                            <th>Content tagged</th>
                            <th>as</th>
                            <th>in</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <% @annotation.tags.each do |tag| %>
                            <% unless tag.content.blank? %>
                            <tr>
                                <td style="word-wrap: break-word;"><%= tag.content %></td>
                                <td><%= tag.tagtype.name %></td>
                                <td><%= tag.tagtype.typeoftag %></td>
                                <td><%= link_to '', [tag.annotation, tag], method: :delete, data: { confirm: 'Please confirm deletion!' }, :class => "glyphicon glyphicon-remove" %></td>
                            </tr>
                            <% end -%>
                        <% end -%>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="col-md-8" id="file">
        <%= content_tag :iframe, nil, src: pdf_annotation_path(@annotation), width: "100%", height: "875px", frameBorder: "0" %>
    </div>

</div>

如何解决这个问题？