响应式页面引导程序3的Div位置

时间:2018-09-27 05:07:24

标签: responsive-design

我正在尝试使用引导程序3将页面转换为响应式。需要3格

移动版需要DIV2才能显示在div3以下。

是否可以使用当前显示的代码

DIV1


DIV2


DIV3

示例页面:http://www.examguides.com/Networkplus/network-plus-1.htm

1 个答案:

答案 0 :(得分:0)

这项工作对您有用吗?
https://codepen.io/panchroma/pen/bmbZaG

HTML

<div class="row parent">
  <div class="col-md-8 div1">Div 1</div>
    <div class="col-md-12  div3">Div 3</div>
  <div class="col-md-4  div2">Div 2</div>
</div>  

CSS

.row.parent{
  position:relative;
}

/* move .div2 to top right of .row.parent when viewport is 992px or more */
@media (min-width: 992px) {
  .div2{
    position:absolute;
    top:0;
    right:0
  }
}