html - 仅在移动设备中控制 Bootstrap 行顺序

Question

我在 this fiddle 有一些简单的 html在宽桌面上显示以下内容(简单的行内容，这是我想要的行为):

这是产生上述输出的代码:

<div class="container">
<div class="row">
<div class="col-md-4"><img class="img-responsive" src="http://placehold.it/800x400"></div>
<div class="col-md-8">
        <h1>Random decisions for emacs, with functions and a minor mode.</h1>
        <p>Random decisions for emacs, with functions and a minor mode.
    Roll various types of dice, generate random numbers from
    </p>
</div>
</div>

在移动端(当我缩小页面宽度时)，我看到了这个:

我想看到的是标题(“随机决定..”)仅显示在 mobile 中的图片上方(不想更改桌面上的任何内容)。看起来我正在更改移动设备中的行顺序，但我想知道如何以干净的方式进行此操作。

Answer 1

Flexbox 可以做到这一点。

html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}
@media (max-width: 768px) {
  .row {
    display: flex;
    flex-direction: column;
  }
  .top {
    order: 2;
  }
  .bottom {
    order: 1;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-4 top">
      <img class="img-responsive" src="http://placehold.it/800x400">
    </div>
    <div class="col-md-8 bottom">
      <h1>Random decisions for emacs, with functions and a minor mode.</h1>
      <p>Random decisions for emacs, with functions and a minor mode. Roll various types of dice, generate random numbers from
      </p>
    </div>
  </div>

或者更简单(不需要 order 值)。这只是颠倒了顺序。

@media (max-width: 768px) {
  .row {
    display: flex;
    flex-direction: column-reverse;

  }
}

Codepen Demo