0

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

.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;
}
<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>

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

4

0 回答 0