css - три столбца, одинакового размера на больших устройствах, центральный элемент, чтобы добраться до верха и два других ниже, на меньших устройствах - PullRequest
Новая
       9

css - три столбца, одинакового размера на больших устройствах, центральный элемент, чтобы добраться до верха и два других ниже, на меньших устройствах

0 голосов
/ 26 апреля 2018

Есть три столбца: 

b  a  c
|  |  |

в больших устройствах.

Я хочу показать их как: 

  a
  |
b   c
|   |

на небольших устройствах.

Мой код: 

<div class="col-xs-12 col-sm-4">
    b
</div>
<div class="col-xs-12 col-sm-4">
    a
</div>
<div class="col-xs-12 col-sm-4">
    c
</div>

и моя попытка состояла в том, чтобы изменить положение второго div, являющегося a и первым div, с помощью jquery, а затем оставить a без изменений и b, чтобы иметь col-xs-8 col-sm-4, а для c иметь col-xs-4 col-sm-4.

Это стандартный способ сделать это?!

Ответы [ 3 ]

0 голосов
/ 26 апреля 2018

Рассмотрите возможность использования медиазапросов CSS .

Примерно так: 

@media (max-width: 1024px) { ... }

Применяет содержащийся CSS только к устройствам, размер которых меньше указанной ширины.

0 голосов
/ 26 апреля 2018

Я сделал это сам: 

<div class="hidden-sm hidden-md hidden-lg col-xs-12">
a //so it shows only on small devices
</div>
<div class="col-xs-8 col-sm-4">
b
</div>
<div class="hidden-xs col-sm-4">
a //so it shows only on large devices
</div>
<div class="col-xs-4">
c
</div>

Спасибо всем, кто даже проголосовал:)

0 голосов
/ 26 апреля 2018

Как то так. Пожалуйста, проверьте https://getbootstrap.com/docs/4.0/layout/grid/ это действительно хорошая документация. 

<div class="row">
  <div class="col-sm-4">
  </div>
  <div class="col-sm-4">
    <div class="row">
      <div class="col-sm-12"></div>
      <div class="col-sm-6"></div>
      <div class="col-sm-6"></div>
  </div>
  <div class="col-sm-4">
  </div>
</div>
...