当我使用flex-flow plus网格系统类时，为什么我的Bootstrap 4页面行不会换行？

Question

我有一个用于搜索的侧边栏，以及侧边栏右侧的主要内容。我希望侧边栏保持大致相同的宽度，而当浏览器窗口水平缩小时，主要内容可以水平缩小。我正在使用Bootstrap 4网格系统来实现这一目标。另外，我使用flex来启用行换行。网格系统响应宽度工作正常，直到浏览器缩小到大约“col-6”大小，此时任何进一步收缩都不会产生行换行。我想要最小宽度的行包装以适应小型设备。我怎样才能实现这个目标（下面的代码）？我一般都非常擅长使用bootstrap和flex。我是一名后端开发人员，将我的脚趾浸入响应式网页设计中。请指教。

此外，请注意，这不是关于“固定侧边栏”，至少还没有，因为这是在垂直滚动期间固定的侧边栏。我对横向响应感兴趣。

<div class="container">
<div class="d-flex flex-row flex-wrap">
    <div id="search" class=" col-6 col-sm-5 col-md-4 col-lg-3 col-xl-3">
        <h4 id="searchTitle">Search Criteria</h4>
        <div id="searchCriteria">
            a form goes here ...                
        </div>
    </div>
    <div id="searchResultsColumn" class="col-6 col-sm-7 col-md-8 col-lg-9 col-xl-9">
        <h4 id="resultTitle">Search Results</h4>
        <div id="searchResultsRows">
            search results go here ...
        </div>
    </div>
</div>

Answer 1

我假设12格系统中的col-6将产生50％的宽度。如果您希望行包裹在某个视口中，为什么要将这两个元素均分为12？在你想要的断点处给出宽度为100％，或者任何适当的自举值都是例如

<div id="search" class="col-12">
 ...
</div>
<div id="searchResultsColumn" class="col-12">
 ...
</div>