Bootstrap给予DIV优先权

Question

我是新手，喜欢它。但是，我有一个小问题，我不知道如何解决。为了更好地解释它，我已经制定了一个简单的网站布局。

这是网站在常规桌面显示器上的显示方式

这是网站在手机上的外观（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类添加到其中。它应该显示你想要的。

Answer 2

这一切都取决于你的标记。

如果您先<div />，然后<img />，那么<img />将始终在<{strong> <div />之后呈现。

因此，您需要做的就是更换标记，以便首先<img />，然后在特定于桌面的css中，您必须float或{{1您可以根据需要显示position和<div />，然后在移动版本上按照您的喜好自动定位。