I have a sidebar that I would like to be a set of columns on mobile, but one column on a desktop or tablet.
I just don't know how to approach this, as the only documentation bootstrap provides is for the other way around
I don't even know what to search, "bootstrap wrap column on wider screen" and the like doesn't turn up useful stuff.
Always start "mobile-first", and create the desired mobile layout. Then make adjustments to get the desired desktop layout.
You could use nesting and the column order (push pull) class to reverse the layout on desktop...
<div class="container-fluid">
<div class="row">
<div class="push-md-9 col-md-3">
<div class="row">
<div class="col-md-12 col-4">
.
</div>
<div class="col-md-12 col-4">
.
</div>
<div class="col-md-12 col-4">
.
</div>
</div>
</div>
<div class="col-md-9 pull-md-3 col-12">
.
</div>
</div>
</div>