Bootsrap 3: Отзывчивая точка останова из строк 3 столбцов

Question

У меня есть две строки, которые содержат 3 столбца в каждой, я хотел бы в определенной точке останова переключиться с 3 столбцов на 2 столбца и с 2 столбцов на 1 столбец (мобильная точка останова). пока это то, что у меня есть.

@media (min-width:768px) {
    .col-md-4{
        min-width: 50%;
    }
}

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

<div class="row">
      <div class="col-md-4">1</div>
      <div class="col-md-4">2</div>
      <div class="col-md-4">3</div>
</div>

<div class="row" >
  <div class="col-md-4">4</div>
  <div class="col-md-4">5</div>
  <div class="col-md-4">6</div>
</div>

Вопрос

Это не работает, что мне не хватает в моем коде? хотя помоги новичку

Answer 1

Просто используйте разные классы столбцов точек останова начальной загрузки. Если вы хотите изменить порядок в начальной загрузке 3 (как требуется в комментариях), вы можете легко использовать push and pull.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="row">
      <div class="col-md-4 col-md-push-4 col-sm-6 col-sm-push-6">1</div>
      <div class="col-md-4 col-md-pull-4 col-sm-6 col-sm-pull-6">2</div>
      <div class="col-md-4 col-sm-6">3</div>
    </div>

https://getbootstrap.com/docs/4.0/layout/grid/#mix-and-match

Answer 2

Используйте col-sm-6, чтобы установить 2 деления в 1 ряду на sm размер ...

(вычисление: 12/6=2 => 100% /2=50% означает, что каждый div получает 50% к своему width)

По умолчанию на экране размера xs будет установлено 1 деление в 1 строке, потому что вы не указали иначе ...

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
      <div class="col-sm-6 col-md-4">1</div>
      <div class="col-sm-6 col-md-4">2</div>
      <div class="col-sm-6 col-md-4">3</div>
</div>

<div class="row" >
  <div class="col-sm-6 col-md-4">4</div>
  <div class="col-sm-6 col-md-4">5</div>
  <div class="col-sm-6 col-md-4">6</div>
</div>
</div>

Answer 3

Я бы поместил их в один и тот же .row и использовал бы соответствующие классы сетки. Это должно дать вам то, что вы хотите:

<div class="row">
    <div class="col-sm-6 col-md-4">1</div>
    <div class="col-sm-6 col-md-4">2</div>
    <div class="col-sm-6 col-md-4">3</div>
    <div class="col-sm-6 col-md-4">4</div>
    <div class="col-sm-6 col-md-4">5</div>
    <div class="col-sm-6 col-md-4">6</div>
</div>

Примечание: я бы не переопределил .col-md-4 или любой из встроенных в сетку очков Bootstrap.

Для получения более подробной информации прочитайте документацию Bootstrap по использованию очков сетки: https://getbootstrap.com/docs/4.0/layout/grid/#mix-and-match