调整页面大小时将第二列放在顶部答案

【问题标题】：Placing second column on top when page is resized调整页面大小时将第二列放在顶部
【发布时间】：2020-03-06 08:40:42
【问题描述】：

我正在尝试使用引导网格在页面上进行响应式设计。

这是我的 HTML：

<div class="row row-2">
    <div class = "col-sm-4 col-sm-offset-2">
        <img class="img-responsive header-notebookImg" src="Images/header/notebook.png" alt="">
    </div>
    <div class="col-sm-4 body-slogan">
        <p class="body-slogan"> Save<span class="body-slogan-word">your</span> ideas with this application</p>
    </div>
</div>

css 文件只包含字体和大小。我的问题是：当我调整页面大小以触发引导超小列类时，是否可以将第二列放在顶部？

第二列上方的代码位于底部。我无法交换列的内容，因为我希望第一列位于大屏幕的左侧。

提前致谢！

【问题讨论】：

你真的用的是 Bootstrap 3 还是 4？
我在页面上使用bootstrap 3.3.7

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

如果您使用的是 Bootstrap 4，使用 flex-direction: column-reverse; 非常简单。

这是一个使用 Bootstrap 4 的简单示例。只需使用 display: flex; 将行包装到一个容器中，然后给它一个 flex-direction: column-reverse;`。

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.reverse {
  display: flex;
  flex-direction: column-reverse;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

/* Desktop View */
@media (min-width: 1281px) {
  
  .reverse {
      flex-direction: column;
    }
  
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="reverse">
    <div class="row">
      <div class="col">
        Row 1
      </div>
    </div>
    <div class="row">
      <div class="col">
        Row 2
      </div>
    </div>  
  </div>
</div>

【讨论】：

是否可以使用 bootstrap 3.3.7？
试过了，谢谢你的回答，但在 bootstrap 3.3.7 上它不起作用。

【解决方案2】：

如果你不想使用 bs4 或者不知道如何使用display:flex，你可以这样做。不要忘记根据需要更改类名

.row-2 {
  direction: rtl;
}

.row-2 .col {
  direction: ltr !important;
  border: 1px solid #eee;
  background: #fefefe;
  padding: 1rem;
}

.row-2 .col-md-offset-2{
  margin-left: 0;
  margin-right: 16.66666667%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row row-2">
  <div class="col col-md-4 col-sm-12 col-md-offset-2">
    <img class="img-responsive header-notebookImg" src="https://artbees-themes-artbees1.netdna-ssl.com/wp-content/uploads/2018/10/jupiter-x-bootstrap-logo.jpg" alt="">
  </div>
  <div class="col col-md-4 col-sm-12 body-slogan">
    <p class="body-slogan"> Save<span class="body-slogan-word">your</span> ideas with this application</p>
  </div>
</div>

【讨论】：