如何在bootstrap

Question

我正在使用bootstrap，我在小屏幕上陷入了div方向。 在中型屏幕上我使用6,6列，它们应该在小屏幕上叠加在一起i want something list this

在小屏幕上，列就像第4列顶部的第3列一样，但是我想要第3列顶部的第4列。我该怎么做？我知道它必须用推拉做一些事情，但我无法弄清楚

编辑：我目前正在使用此代码，需要像我上面分享的图片中的布局一样进行修改

<div class="row">
        <div class="col-md-6">
            column 3
        </div>

        <div class="col-md-6">
            column 4
        </div>
    </div>

Answer 1

使用flex，只需将其添加到@media css查询。

.container>.row{
    display: flex;
    flex-direction: column-reverse;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">





<div class="container">
<h1>Flex:</h1>
<div class="row">
        <div class="col-md-6">
            column 3
        </div>

        <div class="col-md-6">
            column 4
        </div>
</div>
</div>

<h1>normal</h1>
<div class="row">
        <div class="col-md-6">
            column 3
        </div>

        <div class="col-md-6">
            column 4
        </div>
</div>

Answer 2

在3和4上使用float right属性，在3之前使用4，它将在大屏幕上自动显示3,4，在小屏幕上显示4,3