Question

在中等和最大屏幕尺寸上，我希望左侧的内容和右侧的侧边栏内容。在较小的设备上，我希望在主要内容之上有一些侧边栏内容，其余的在下面。据我所知，这让我很接近。我只需要让最后一个侧边栏浮动到桌面视图上的内容旁边。但是，它没有合作。另一种解决方案是添加具有重复内容的可见和隐藏类。我对这个解决方案不感兴趣。

＆＃13;

.content {
  margin: 10px;
  padding: 10px;
  text-align: center;
  font-weight: bold;
}

.main-content {
  background-color: #eee;
  height: 400px;
}

.sidebar-a {
  background-color: red;
  height: 200px;
  color: #fff;
}

.sidebar-b {
  background-color: blue;
  height: 200px;
  color: #fff;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
        <div class="row">
            <div class="col-md-4 col-md-push-8">
                <div class="content sidebar-a">
                  Sidebar A
                </div>
            </div>
            <div class="col-md-8 pull-up col-md-pull-4">
                <div class="content main-content">
                  Main Content
                </div>
            </div>
            <div class="col-md-4 col-md-push-8">
                <div class="content sidebar-b">
                  Sidebar Content B
                </div>
            </div>
        </div>
    </div>

＆＃13;

我试图将侧边栏b向右移动，希望在内容旁边出现。此时推送类是不必要的。桌面上的结果在视觉上与上面的结果相同。

Bootstrap网格顺序 - 在侧边栏中水平堆叠列，在小型设备上的主要内容上方和下方分开

0 个答案: