更改移动设备中的顺序答案

【问题标题】：Change the order in mobile devices更改移动设备中的顺序
【发布时间】：2016-12-25 23:54:34
【问题描述】：

我已经制作了这个引导代码。但我无法弄清楚我在 sm 和 xs 视口上如何更改顺序，因此图片 div 位于 Headline div 之下。

有人知道我该怎么做吗？

https://plnkr.co/edit/yDwXuk1mia7JUVVEJ7kY?p=preview

  <body class="landingpage">
    <div class="background-image" style="background-image: url('http://www.planwallpaper.com/static/images/4-Nature-Wallpapers-2014-1_ukaavUI.jpg?anchor=center&amp;mode=crop&amp;width=2000&amp;height=1200&amp;rnd=131160348720000000');"></div>
    <div class="top-area" style="border: 4px solid red;">
      <div class="container">
        <div class="row">
          <div class="col-sm-4" style="border: 4px solid pink;">
            Logo
          </div>
            <div class="container">
              <div class="row">
                <div class="col-sm-12" style="border: 4px solid yellow;">
                  <p>Picture</p>
                </div>
                <div class="col-sm-6 col-sm-pull-6" style="border: 4px solid blue;">
                  <p class="header-xl center">
                    HEADLINE TEXT 
                  </p>
                  <p class="sub-header center">
                    Subline text
                  </p> 
                </div>
              </div>
            </div>
    </div>
  </body>
</html>

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

在标题下创建另一个具有“visible-sm”和“visible-xs”类的div，并将“hidden-sm”和“hidden-xs”添加到第一个div

  <body class="landingpage">
    <div class="background-image" style="background-image: url('http://www.planwallpaper.com/static/images/4-Nature-Wallpapers-2014-1_ukaavUI.jpg?anchor=center&amp;mode=crop&amp;width=2000&amp;height=1200&amp;rnd=131160348720000000');"></div>
    <div class="top-area" style="border: 4px solid red;">
      <div class="container">
        <div class="row">
          <div class="col-sm-4" style="border: 4px solid pink;">
            Logo
          </div>
            <div class="container">
              <div class="row">
                <div class="col-sm-12 hidden-sm hidden-xs" style="border: 4px solid yellow;">
                  <p>Picture</p>
                </div>
                <div class="col-sm-6 col-sm-pull-6" style="border: 4px solid blue;">
                  <p class="header-xl center">
                    HEADLINE TEXT 
                  </p>
                  <p class="sub-header center">
                    Subline text
                  </p> 
                </div>
                <div class="col-sm-12 visible-sm visible-xs" style="border: 4px solid yellow;">
                <p>Picture</p>
                </div>
              </div>
            </div>
    </div>
  </body>
</html>

编辑：Ricardo Ruiz 在 cmets 中的解决方案是一个更好的解决方案

【讨论】：

非常感谢您的回答。我刚刚试了一下代码，但我可以看到标题上方和标题下方都有一张图片。我没有用更大的设备来充分描述它。当它达到 Ipad 大小时，订单应该是正常的，这意味着我的代码是怎样的。那么我可以删除你最后制作的图片类吗？
移除“hidden-sm”和“visible-sm”类。这样，在 iPad 上查看时，图片将显示在标题上方。
现在对我来说很有意义。非常感谢
我认为this 是一个更好的解决方案。而不是加载两个图像。
@Ricardo Ruiz 这确实是一个更好的解决方案。感谢您的意见。

【解决方案2】：

@media (max-width: 767px) {
  .sm-col-reorder { display: flex; flex-direction: column; }
  .sm-order-1 { order: 1; }
  .sm-order-2 { order: 2; }
}

<div class="background-image" style="background-image: url('http://www.planwallpaper.com/static/images/4-Nature-Wallpapers-2014-1_ukaavUI.jpg?anchor=center&amp;mode=crop&amp;width=2000&amp;height=1200&amp;rnd=131160348720000000');"></div>
<div class="top-area" style="border: 4px solid red;">
  <div class="container">
    <div class="row">
      <div class="col-sm-4" style="border: 4px solid pink;">
        Logo
      </div>
      <div class="container">
        <div class="row sm-col-reorder">
          <div class="col-sm-12 sm-order-2" style="border: 4px solid yellow;">
            <p>Picture</p>
          </div>
          <div class="col-sm-6 col-sm-pull-6 sm-order-1" style="border: 4px solid blue;">
            <p class="header-xl center">
              HEADLINE TEXT
            </p>
            <p class="sub-header center">
              Subline text
            </p>
          </div>
        </div>
      </div>
    </div>

【讨论】：

非常感谢您的回答。这实际上完全是我想要的。如果您有时间在这里查看我的代码：plnkr.co/edit/yDwXuk1mia7JUVVEJ7kY?p=preview .. 当它到达 md 时，图片和标题标签将彼此并排。我可以将其合并到您的代码中吗？我之前没有使用 flex-direction :-/
flex-direction 很重要，因为有一个块低于另一个块。您可以查看一些 flexbox 指南，例如css-tricks。请同时检查与浏览器的兼容性，这对您来说没问题。否则，Cytex01 的解决方案要好得多，应该适用于任何地方。