html - 反转侧边栏的 Bootstrap 行行为

Question

我需要侧边栏中的元素在大屏幕上是垂直的，在小屏幕上是水平的。

但是使用 bootstrap 的行，它的作用恰恰相反。

是否有一种简单的方法来反转行为以满足我的要求？

我不想为这个简单的设计使用 javascript。

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

是这样的吗？

<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/