Question

我正在尝试使用引导网格在页面上进行响应式设计。这是我的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 whth this application</p>
            </div>
        </div>

css文件仅包含字体和大小。我的问题是：当我调整页面大小以触发引导程序额外的小对话框类时，是否可以将第二个对话框放在顶部？

第二行的代码位于底部。我无法交换列文的内容，因为我希望第一个列文在较大的屏幕左侧。预先感谢！

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

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

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

2 个答案: