html - Bootstrap 3 : Responsive breakpoint from rows of 3 columns

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>

Question

这不起作用，我的代码中缺少什么？帮助我是新手

Answer 1

我会将它们全部放在同一个 .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