Question

我正在研究一个Bootstrap主题。我有一个产品页面，其中有左和右块div。当屏幕调整大小时，尝试将右侧块div推到左侧块上方。请参阅我已完成以下代码更新和更改，但是我没有得到实际结果。

<div class="col-main col-sm-9">
LEFT BLOCK
</div>

<div class="col-right sidebar col-sm-3">
RIGHT BLOCK
</div>

更新

<div class="col-main col-sm-9 col-sm-push-3 col-md-push-0">
LEFT BLOCK
</div>

<div class="col-right sidebar col-sm-3 col-sm-pull-9 col-md-pull-0">
RIGHT BLOCK
</div>

我对小型设备在响应时的期望：

<div class="col-right sidebar col-sm-3 col-sm-pull-9 col-md-pull-0">
RIGHT BLOCK
</div>
<div class="col-main col-sm-9 col-sm-push-3 col-md-push-0">
LEFT BLOCK
</div>

当屏幕调整大小时，任何人都知道为什么Right块不会叠加在Left Div之上？这个主题使用Bootstrap 3+。列顺序应该在Bootstrap中工作吗？

谢谢，需要一些输入，我还在尝试使用CSS。

Answer 1

请查看此sample：

<div class="container">
<div class="row">
<div class="col-xs-4">Menu</div>
<div class="col-xs-8">
  <div class="row">
    <div class="col-md-4 col-md-push-8">Right Content</div>
    <div class="col-md-8 col-md-pull-4">Content</div>
  </div>
</div>

Answer 2

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-sm-9 col-xs-6">
      LEFT BLOCK
    </div>

    <div class="col-sm-3 col-xs-6">
      RIGHT BLOCK
    </div>
  </div>
</div>

＆＃13;

你需要这样的东西吗？如果是这样，col-xs-6就足够了。

Bootstrap没有发生 - 在响应小的设备上将右块Block Div放在Left Block上方

2 个答案: