html - 响应式地将行翻转到 Bootstrap 网格中的列

Question

给定以下按钮的网格布局:

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

<form class="form" role="form">
  <div class="form-group">
    <div class="col-sm-6">
      <button type="button" class="btn btn-block btn-default">Button A1</button>
    </div>
    <div class="col-sm-6">
      <button type="button" class="btn btn-block btn-default">Button A2</button>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-6">
      <button type="button" class="btn btn-block btn-default">Button B1</button>
    </div>
    <div class="col-sm-6">
      <button type="button" class="btn btn-block btn-default">Button B2</button>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-6">
      <button type="button" class="btn btn-block btn-default">Button C1</button>
    </div>
    <div class="col-sm-6">
      <button type="button" class="btn btn-block btn-default">Button C2</button>
    </div>
  </div>
</form>

如果您在狭窄的视口(viewport)中运行它，那么您会看到每对字母按钮明显分组/接触。如果您在宽视口(viewport)中运行它(单击“整页”按钮)，那么您会看到编号的三元组与由列间隙分隔的字母对接触。

无论视口(viewport)大小如何，我都希望字母按钮清晰可见。我尝试翻转布局:

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

<form class="form" role="form">
  <div class="form-group">
    <div class="col-sm-4">
      <button type="button" class="btn btn-block btn-default">Button A1</button>
    </div>
    <div class="col-sm-4">
      <button type="button" class="btn btn-block btn-default">Button B1</button>
    </div>
    <div class="col-sm-4">
      <button type="button" class="btn btn-block btn-default">Button C1</button>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-4">
      <button type="button" class="btn btn-block btn-default">Button A2</button>
    </div>
    <div class="col-sm-4">
      <button type="button" class="btn btn-block btn-default">Button B2</button>
    </div>
    <div class="col-sm-4">
      <button type="button" class="btn btn-block btn-default">Button C2</button>
    </div>
  </div>
</form>

不出所料，现在情况正好相反:数字被分组在一个小视口(viewport)中，而字母被分组在一个大视口(viewport)中。

有没有一种简单的方法可以使字母无论如何都分组显示？不过，我仍然希望在更大的视口(viewport)尺寸中有一个网格布局，而且我不想为这种情况定义自定义规则/类。

编辑:为了让这一点更清楚，我想要实现的是:

• 在窄视口(viewport)中，看起来像第一个片段在窄视口(viewport)中的效果:全宽按钮排列成三组，每组两个相同字母的按钮，每组两个按钮之间垂直分隔。

• 在宽视口(viewport)中，看起来像第二个片段在宽视口(viewport)中的效果:三列，每列包含两个相同字母的按钮，没有垂直分隔，列之间只有水平分隔。

Answer 1

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

<div class="container">
  <form class="form" role="form">
    <div class="form-group">
      <div class="col-sm-16">
        <button type="button" class="btn btn-block btn-default">Button A1</button>
      </div>
      <div class="col-sm-16">
        <button type="button" class="btn btn-block btn-default">Button A2</button>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-16">
        <button type="button" class="btn btn-block btn-default">Button B1</button>
      </div>
      <div class="col-sm-16">
        <button type="button" class="btn btn-block btn-default">Button B2</button>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-16">
        <button type="button" class="btn btn-block btn-default">Button C1</button>
      </div>
      <div class="col-sm-16">
        <button type="button" class="btn btn-block btn-default">Button C2</button>
      </div>
    </div>
  </form>
</div>