Inverting bootstrap row behaviour for sidebar

Question

I need items in a sidebar vertically on big screens and horizontally on small screens.

But using bootstrap's row, it does the opposite.

Is there a simple way to inverse the behaviour to meet my requirements?

I dont want to use javascript for this simple design.

index.html:

<div class="container" id="mainContainer">
   <div class="col-md-4" id="sideBar">
      <div class="row">
         <div class="col-md-4">1</div>
         <div class="col-md-4">2</div>
         <div class="col-md-4">3</div>
     </div>
   </div>
   <div class="col-md-8" id="mapContainer"></div>
</div>

css/main.css:

#mainContainer {
   width: 100%;
   max-width: 100%;
   padding: 0;
}
    
html,
body,
#mainContainer,
#mapContainer {
   height: 100%;
}
    
@media (min-width: 992px) {
   #sideBar {
      width: 300px;
   }
   #mapContainer {
      width: calc(100% - 300px);
   }
}

Answer 1

Something like this?

<div class="container" id="mainContainer">
    <div class="col-sm-12 col-xs-4" id="sideBar">
        <div class="row">
            <div class="col-xs-4 col-sm-12">1</div>
            <div class="col-xs-4 col-sm-12">2</div>
            <div class="col-xs-4 col-sm-12">3</div>
        </div>
    </div>
    <div class="col-sm-12 col-xs-8" id="mapContainer">map here</div>
</div>

https://jsfiddle.net/6xcqasno/