使用Bootstrap 4订购和堆叠3列

本文介绍了使用Bootstrap 4订购和堆叠3列的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我在引导列中具有以下结构:

I have this structure in bootstrap columns:

我希望您更改为较低的分辨率，请按以下顺序排序:

And I want you to change to a lower resolution, be ordered as follows:

我在这里找到了如何使用flexbox的方法: Flexbox:对列进行重新排序和堆栈

I found how to do it with flexbox here: Flexbox: reorder and stack columns

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

But I can not change the entire structure of my project to flexbox, so I want to know if with bootstrap 4, it is possible to do so.

非常感谢您.

我的考试很差.

@import url( 'maxcdn.bootstrapcdn/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)实用程序类避免使用多余的CSS . 1-2-3在移动设备上变为3-2-1.

You can use the Bootstrap 4 (alpha 6) utility classes to avoid the extra CSS. 1-2-3 becomes 3-2-1 on mobile.

<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>

www.codeply/go/GIcPuzURbs