用3列引导推拉

时间:2018-05-01 07:45:44

标签: html css twitter-bootstrap twitter-bootstrap-3

我必须在小屏幕列中重新排列列,按以下顺序1,2,3应在小屏幕中显示为3,1,2。

它适用于两个,但我不知道如何使用以下结构的三列

<div class="container-fluid">
  <h1>Push and Pull</h1>
  <p>Resize the browser window to see the effect.</p>
  <div class="row">
    <div class="col-md-6" style="background-color:lavender;">1</div>
    <div class="col-md-3" style="background-color:lavenderblush;">2</div>
    <div class="col-md-3" style="background-color:green;">3. This should be first one on small screen</div>
  </div>
</div>

https://codepen.io/anon/pen/zjZJRG

我尝试了一些,但它打破了设计,不确定它是否适用于三列。

2 个答案:

答案 0 :(得分:2)

在使用BS3时,您可以使用以下HTML结构:

<div class="row">
    <div class="col-xs-12 col-md-3 pull-right">3</div>
    <div class="col-xs-12 col-md-6">1</div>
    <div class="col-xs-12 col-md-3">2</div>
</div>

<强>演示:

&#13;
&#13;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <h1>Push and Pull</h1>
  <p>Resize the browser window to see the effect.</p>
  <div class="row">
    <div class="col-xs-12 col-md-3 pull-right" style="background-color:green;">3. This should be first one on small screen</div>
    <div class="col-xs-12 col-md-6" style="background-color:lavender;">1</div>
    <div class="col-xs-12 col-md-3" style="background-color:lavenderblush;">2</div>
  </div>
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

如果您使用的是bootstrap 4,那么您可以使用flex类来管理它。在这种情况下,您可以使用order- *。

<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
<div class="container-fluid">
  <h1>Push and Pull</h1>
  <p>Resize the browser window to see the effect.</p>
  <div class="row d-flex">
    <div class="col-md-6 order-sm-2" style="background-color:lavender;">1</div>
    <div class="col-md-3 order-sm-1" style="background-color:lavenderblush;">2</div>
    <div class="col-md-3 order-sm-0" style="background-color:green;">3. This should be first one on small screen</div>
  </div>
</div>
</body>
</html>