反转侧栏的引导行行为

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/

Answer 2

您可以使用类似hidden-xs的类，这会将内容隐藏在小型设备上。因此你需要添加另一个div，内容水平，隐藏类-md hidden-lg女巫隐藏在大屏幕上的水平内容。