BS4-将第1列向右浮动

Question

我正在使用bootstrap4，我需要将第一个div列在中型设备中向右浮动，并在移动设备上向上显示。 bootstrap3可能具有如下所示的结构，但是由于bs4现在使用flex，因此似乎无法正常工作。知道如何实现吗？

<div class="row">
    <div class="col-12 col-md-8 float-right">
         //RIGHT BANNER HERE
    </div>
    <div class="col-12 col-md-4">
        //SOME CONTENTS
    </div>
</div>

Answer 1

.row默认带有display:flex;，您可以使用!important覆盖它们以取消效果。

.row{display:block!important;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-12 col-md-8 float-right">
         //RIGHT BANNER HERE
    </div>
    <div class="col-12 col-md-4">
        //SOME CONTENTS
    </div>
</div>

ps：查看完整尺寸的输出

Answer 2

您不需要额外的CSS。

在Bootstrap 4中，row是display:flex，因此您可以使用d-md-block（在md及以上版本的display:block）覆盖{ {1}}。

display:flex

https://www.codeply.com/go/jjs8RFfwpX

Answer 3

示例中的HTML结构似乎很奇怪，您在两个容器中都使用了 col-12 。我假设您希望横幅在右侧，而不是在横幅上方浮动，只是要在那里，为什么不只是稍微改变一下HTML。

类似

html {
    padding: 20px;
}

.banner, .main {
    border: solid 1px grey;
}

<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-8 col-md-10 main">
        // SOME CONTENTS
    </div>
	<div class="col-4 col-md-2 banner">
        // RIGHT BANNER HERE
    </div>
</div>

让我知道这是否对您有用