Bootstrap Push and Pull с 3 колонками - PullRequest
Новая
       5

Bootstrap Push and Pull с 3 колонками

0 голосов
/ 01 мая 2018

Мне нужно переставить столбец в столбце малого экрана, который в следующей последовательности 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 голосов
/ 01 мая 2018

Если вы используете 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>
0 голосов
/ 01 мая 2018

Поскольку вы работаете с 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>

Демо: 

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