Question

如何使用bootstrap实现以下功能：

桌面视图

[col-md-9(number 1)][col-md-3(number 3)]  
[col-md-12(number 2)]

移动视图

[col-xs-12(number 1)]  
[col-xs-12(number 2)]  
[col-xs-12(number 3)]

提前致谢

Answer 1

在这种情况下，你不使用col pull和col push。您使用可见和隐藏的类。

<div class="row visible-xs visible-sm">
                <div class="col-xs-12" style="background-color:red">1</div>
                <div class="col-xs-12" style="background-color:blue">2</div>
                <div class="col-xs-12" style="background-color:green">3</div>
            </div>
            <div class="row visible-md visible-lg">
                <div class="col-xs-9" style="background-color:red">1</div>
                <div class="col-xs-3" style="background-color:green">3</div>
                <div class="col-xs-12" style="background-color:blue">2</div>   
            </div>

Answer 2

＆＃13;

div {
  color: #fff;
  text-align: center;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-xs-12 col-md-6" style="background-color:red">1</div>
  <div class="col-xs-12 col-md-6 hidden-xs hiddem-sm" style="background-color:green">3 (visible in desktop and above)</div>
  <div class="col-xs-12 col-md-12" style="background-color:blue">2</div>
  <div class="col-xs-12 col-md-6 visible-xs visible-sm" style="background-color:green">3 (visible in tabs and mobile)</div>
</div>

＆＃13;

您无法直接达到该订单，对于至少一种情况，您需要复制内容并在桌面或移动视图中切换其可见内容。

使用引导程序更改列顺序

2 个答案: