html - Bootstrap 给予 DIV 优先权

Question

我是 bootstrap 的新手并且很喜欢它。但是，我有一个小问题，我不确定如何解决。为了更好地解释它，我绘制了一个简单的网站布局。

这是网站在普通桌面显示器上的样子

这是网站在手机(iPhone 5S)上的样子

我希望一切都保持不变，除了在移动版布局上，我希望图像排在第一位(AkA 位于顶部)。但是，我所做的任何更改似乎都会在常规桌面显示器上造成困惑。有什么方法可以确定 div 的优先级或沿线的东西吗？我还认为移动布局上的图像出现在文本框之后是随机的，但我想这是我的代码造成的。

我的代码如下。

    <div class="container">
        <div class="row item">
            <div class="col-sm-5">
                <h1>Test Tile!</h1>
                <p id="test">Text Text Text</p>
                <form  id="newsletter" action="" method="POST" class="form-inline" role="form">
                  <div class="form-group">
                    <label class="sr-only" for="exampleInputEmail2">Email address</label>
                    <input type="EMAIL" name="EMAIL" class="form-control" id="EMAIL" placeholder="Enter your email">
                    <button type="submit" class="btn">submit</button>
                    </br>
                  </div>
                </form>
            </div>
            </br>
            <div class="col-sm-7">
                <img src="img/product_image.png" class="img-responsive main" alt="product image" />
            </div>
        </div>

谢谢!

Answer 1

将带有 img 的 div 放在标记的最前面，然后向其中添加 .col-md-push-7 css 类。它应该如您所愿地显示。