反转侧边栏的引导行行为

Question

我需要侧边栏中的项目在大屏幕上垂直显示，在小屏幕上水平显示。

但是使用 bootstrap 的 row，它会起到相反的作用。

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

我不想使用 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

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