使用引导程序 4 对 3 列进行排序和堆叠答案

【问题标题】：Order and stack 3 columns with bootstrap 4使用引导程序 4 对 3 列进行排序和堆叠
【发布时间】：2017-07-31 00:59:03
【问题描述】：

我在引导列中有这个结构：

我要你改成较低的分辨率，按如下顺序排列：

我在这里找到了使用 flexbox 的方法： Flexbox: reorder and stack columns

但是我无法将我的项目的整个结构更改为 flexbox，所以我想知道使用 bootstrap 4 是否可以这样做。

非常感谢。

我糟糕的测试。

@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css' );

div {
  text-align: center;
  height: 60px;
}

#left {
  background: yellow;
}

#middle {
  background: blue;
}

#right {
  background: coral;
}

<div class="container">
  <div class="row">
    <div class="col-sm-3 col-md-3">
      <div id="left">COLUMN 1</div>
    </div>
    <div class="col-sm-6 col-md-6">
      <div id="middle">COLUMN 2</div>
    </div>
    <div class="col-sm-3 col-md-3">
      <div id="right">COLUMN 3</div>
    </div>
  </div>
</div>

【问题讨论】：

Bootstrap 4 alpha 6 默认是 flexbox。
是的，但我不知道该怎么做。
col 2 是否有特定的高度，或者您只是希望它填满右侧列的高度？

标签： css twitter-bootstrap flexbox bootstrap-4 twitter-bootstrap-4

【解决方案1】：

您是否尝试将第 2 列拉到较低的分辨率？

【讨论】：

【解决方案2】：

我假设“分辨率”是指较小的屏幕尺寸？

这是一个可能的解决方案，它使用一些引导推/拉网格实用程序来重新排列中等大小视口中的列，然后按照您在图表中显示的方式重新排列小尺寸视口中的布局。在小屏幕视图中，在媒体查询中，我使用 css 属性 order 垂直重新排列第 1 列和第 3 列希望它能让您走上正确的轨道

<div class="container">
    <div class="row">
        <div class="col-sm-8 col-md-6 push-md-3">
          <div id="middle">COLUMN 2</div>
        </div>
        <div class="col-sm-4 col-md-6">
          <div class='row'>
            <div id='leftcont' class="col-md-6 pull-md-12">
             <div id="left">COLUMN 1</div>
           </div>
            <div id='rightcont' class="col-md-6">
             <div id="right">COLUMN 3</div>
           </div>
          </div>
        </div>
    </div>
</div>

CSS：

div {
  text-align:center;
  height:60px;
}
#left{background:yellow;}
#middle {background:blue;}
#right {background:coral;}

@media (max-width: 768px) {
  #leftcont { order: 2; }
  #rightcont {
    order: 1;
    margin-bottom: 1em; }
}

新fiddle

可能必须针对网格断点调整 div 的高度，但由于彩色 div 仅用于测试，因此我与您的示例不匹配

【讨论】：

非常感谢您！而且你对 div 的高度是绝对正确的，只有一个测试。

【解决方案3】：

您可以使用 Bootstrap 4 (alpha 6) 实用程序类来避免额外的 CSS。 1-2-3 在移动设备上变成 3-2-1。

<div class="container">
    <div class="row">
        <div class="col-sm-8 col-md-6 push-md-3">
          <div id="middle">COLUMN 2</div>
        </div>
        <div class="col-sm-4 col-md-6">
          <div class="row">
            <div class="col-md-6 pull-md-12 flex-last flex-md-unordered">
             <div id="left">COLUMN 1</div>
           </div>
            <div class="col-md-6">
             <div id="right">COLUMN 3</div>
           </div>
          </div>
        </div>
    </div>
</div>

http://codeply.com/go/GIcPuzURbs

【讨论】：

顺便说一句，flex-first flex-md-unordered 不是必需的 codeply
Bootstrap 4 上没有“pull”修饰符吗？ BS4 - Grid System