Html 更改移动设备中的顺序_Html_Css_Twitter Bootstrap

Html 更改移动设备中的顺序

html css twitter-bootstrap

Html 更改移动设备中的顺序,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我已经做了这个引导代码。但是我不知道我在sm和xs视口中是如何改变顺序的，所以图片div被放在标题div下有人知道我怎么做吗标志图画标题文本子行文本在标题下用“可见sm”和“可见xs”类创建另一个div，并在第一个div中添加“隐藏sm”和“隐藏xs” <body class="landingpage"> <div class="background-image" style="background-image: url('http://ww

我已经做了这个引导代码。但是我不知道我在sm和xs视口中是如何改变顺序的，所以图片div被放在标题div下

有人知道我怎么做吗


标志
图画

标题文本


子行文本

在标题下用“可见sm”和“可见xs”类创建另一个div，并在第一个div中添加“隐藏sm”和“隐藏xs”

  <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在评论中的解决方案是一个更好的解决方案

在标题下用“可见sm”和“可见xs”类创建另一个div，并在第一个div中添加“隐藏sm”和“隐藏xs”

  <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在评论中的解决方案是一个更好的解决方案

@介质（最大宽度：767px）{
.sm col重新排序{display:flex；flex direction:column；}
.sm-order-1{order:1；}
.sm-序-2{序：2；}
}


标志
图画

标题文本


子行文本

@介质（最大宽度：767px）{
.sm col重新排序{display:flex；flex direction:column；}
.sm-order-1{order:1；}
.sm-序-2{序：2；}
}


标志
图画

标题文本


子行文本

非常感谢您的回答。我刚刚试过代码，但我可以看到标题上方和下方都有一张图片。我对更大的设备描述得不够。当它达到Ipad大小时，订单应该是正常的，这意味着我的代码是如何的。那么我可以删除你最后制作的图片类吗？删除“隐藏sm”和“可见sm”类。这样，当在iPad上观看时，图片就会出现在标题上方。现在对我来说，这很有意义。谢谢你，我认为这是一个更好的解决办法。而不是加载两个图像。@Ricardo Ruiz这确实是一个更好的解决方案。谢谢你的意见。非常感谢你的回答。我刚刚试过代码，但我可以看到标题上方和下方都有一张图片。我对更大的设备描述得不够。当它达到Ipad大小时，订单应该是正常的，这意味着我的代码是如何的。那么我可以删除你最后制作的图片类吗？删除“隐藏sm”和“可见sm”类。这样，当在iPad上观看时，图片就会出现在标题上方。现在对我来说，这很有意义。谢谢你，我认为这是一个更好的解决办法。而不是加载两个图像。@Ricardo Ruiz这确实是一个更好的解决方案。谢谢你的意见。非常感谢你的回答。这完全是我想要的。如果你有时间在这里看我的代码：。。当它到达md时，图片和标题标签将相互靠近。我可以把它合并到你的代码中吗？我以前没有使用过flex direction:-/flex direction对于一个块低于另一个块很重要。您可以检查一些flexbox指南，例如。请，也检查与浏览器的兼容性，这对你来说是好的。否则，Cytex01的解决方案会更好，应该在任何地方都适用。非常感谢您的回答。这完全是我想要的。如果你有时间在这里看我的代码：。。当它到达md时，图片和标题标签将相互靠近。我可以把它合并到你的代码中吗？我以前没有使用过flex direction:-/flex direction对于一个块低于另一个块很重要。您可以检查一些flexbox指南，例如。请，也检查与浏览器的兼容性，这对你来说是好的。否则，Cytex01的解决方案要好得多，应该适用于所有地方。