仅在移动设备中控制引导程序行顺序

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>

在移动设备中（当我缩小页面宽度时），我看到了这一点：

我想要看的是标题（“随机决定...”）仅显示在移动中的图片上方（不想更改桌面中的任何内容）。看起来我正在改变移动行中的行顺序，但是我希望我能以一种干净的方式做一些指导。

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

Answer 2

您可以使用Bootstraps推/拉类。您需要对内容进行重新排序，以使您的图像在堆栈中排在第二位（Bootstrap首先是移动设备），因此在移动设备上时，图像从标题下方开始，然后在展开视口时向左移动。

请参阅Column Reordering

工作示例;

<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-8 col-md-push-4">
      <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 class="col-md-4 col-md-pull-8">
      <img class="img-responsive" src="http://placehold.it/800x400">
    </div>

  </div>
</div>

Answer 3

您可以使用bootstrap的col-**-push-*和col-**-pull-*类来实现此目的。诀窍是颠倒元素的顺序（就像你想在这个例子中看到的那样）和＆＃34; push＆＃34;第一个元素和＆＃34;拉＆＃34;第二个是分配另一个元素的列数。在这里，您要将col-md-8 div放在TOP上，为其添加col-md-push-4类，并相反地向（现在）第二个div添加col-md-pull-4。

Answer 4

这对我有用。我接受了@vanburen的回答，因为这就是让我这样做的原因..

<div class="container">
<div class="row">

<div class="col-md-8 col-md-push-4">
    <h1>Random decisions for emacs, with functions and a minor mode.</h1>
</div>

<div class="col-md-4 col-md-pull-8">
    <img class="img-responsive" src="http://placehold.it/800x400">
</div>

<div class="row">
    <div class="col-md-4">
    </div>
    <div class="col-md-8">
    <p>Random decisions for emacs, with functions and a minor mode. Roll various types of dice, generate random numbers from</p>
    </div>

</div>

</div>