桌面上4列，移动的上2列：

<div class="row">
<div class="col-sm-3 col-6 m-auto"></div>
<div class="col-sm-3 col-6 m-auto"></div>
<div class="col-sm-3 col-6 m-auto"></div>
<div class="col-sm-3 col-6 m-auto"></div>
</div>

字符串
可能需要添加类流体到图像对象，以保持图像在div内的响应。

我以前遇到过这个问题。问题是我的内容高度不同。因为Bootstrap使用浮动来排列它的列，所以如果列A比列B高，列C就不能一直浮动到左边。
我已经包含了一个codepen的链接，这样你就可以看到它的运行。上面的两行正是你的代码，而下面的两行显示了一个div，它的高度与其他div不同。
http://codepen.io/egerrard/pen/PGRQYK
你的解决方案是将你的div的高度设置为所有内容的最大高度。

.maxHeightDiv {
    height: 200px;
}

你可能需要为不同的窗口宽度设置高度，这可能有点烦人，但这是 Bootstrap 浮点系统的一个警告。

尽管这是旧的，也许它帮助一些你。
我的方法是编写比必要代码更多的代码，但我无法提出一个 Bootstrap 网格系统解决方案，该解决方案提供不同的列和行更改以及屏幕宽度更改。
所以让我们开始：

• 切换到.scss并实现引导响应功能
• 包含一个父div，它充当引导网格系统的视图切换容器
• display: none !important和display: inline !important在div中的用法
• 提示，将图像类的宽度设置为max-widht: 100%;，这将强制图像在不超过其父宽度的情况下占据尽可能多的位置;当然除非你想要不同的独特尺寸

.scss：（检查您的 Bootstrap css version）

$stageZero: 540px;
$stageOneLower: 719px;
$stageOneHigher: 720px;
$stageTwoLower: 959px;
$stageTwoHigher: 960px;
$stageThree: 1140px;

@mixin stage00 {
  @media (max-width: $stageZero) { @content; }
}

@mixin stage01 {
  @media (min-width:$stageOneLower) and (max-width:$stageOneHigher)  { @content; }
}

@mixin stage02 {
  @media (min-width:$stageTwoLower) and (max-width:$stageTwoHigher) { @content; }
}

@mixin stage03 {
  @media (min-width: $stageThree) { @content; }
}
.mobileViewToggle {
    @include stage00 {display: inline !important;}
    @include stage01 {display: none !important;}
    @include stage02 {display: none !important;}
    @include stage03 {display: none !important;}
}
.desktopViewToggle {
    @include stage00 {display: none !important;}
    @include stage01 {display: inline !important;}
    @include stage02 {display: inline !important;}
    @include stage03 {display: inline !important;}
}

.html：

<div class="mobileViewToggle">
    < Bootstrap Grid Code with xs prefix, e.g. col-xs-4>
</div>

<div class="desktopViewToggle">
    < Bootstrap Grid Code with sm prefix, e.g. col-sm-6>
</div>

我在Boostrap中使用堆叠到水平&混合和匹配。

1.水平堆叠

<div class="row">
  <div class="col-sm-8">col-sm-8</div>
  <div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
</div>

桌面视图：

移动的视图：

2.混合搭配

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-12 col-md-8">.col-12 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-6">.col-6</div>
  <div class="col-6">.col-6</div>
</div>

桌面视图：

移动的视图：

**阅读更多信息：**getbootstrap.com/docs/4.0/layout/grid/#mix-and-match
**阅读更多信息：**getbootstrap.com/docs/4.0/layout/grid/#stacked-to-horizontal

您可以使用下面的类，如下所示...

1. col-xs-2-仅在xs设备上为两列-（移动的）
2. col-md-3-在除移动的设备以外的所有设备上为3列
   <div class="row"> <div class="col-xs-2 col-md-3">Content</div> .... </div>不使用js就无法更改行。此外，在移动的上，这真的很重要吗...？