Question

我想在台式机和移动设备上订购其他商品，目前这是订单

在Med +上：

关于小：

桌面很好。这是正确的位置。在移动设备上，我希望图片位于按钮和测试下方。我已经尝试了order-sm-fist和order-sm-last，也尝试了order-1，直到order-2，但似乎没有什么改变。不知道我在做什么错：

    <section class="feature section">
    <div class="container">
        <div class="row">
            <div class="heading">
                <h2>Try it now!</h2>
            </div>
            <div class="col-md-5 order-md-last">
                <img src="The image url is here"
                    class="" id="generated-monKey" alt="">
            </div>
            <div class="col md-2 order-md-1">
                <br>
            </div>
            <div class="col-md-5 order-md-first text-center">
                <p>Enter a Banano wallet address and press the "Generate monKey" button.</p>
                <br>
                <p>If you do not have a Banano wallet you can create one in BananoVault or simply generate a random Banano
                    wallet address.</p>
                <br>
                <div class="container">
                    <input type="text" class="form-control form-rounded" placeholder="Banano Address" maxlength="64" size="65">
                    <br>
                    <div class="container">
                        <div class="row">
                            <form>
                                <div class="checkbox col-md-6">
                                    <label>
                                        <input type="checkbox" value="" checked>Accessories</label>
                                </div>
                                <div class="checkbox col-md-6">
                                    <label>
                                        <input type="checkbox" value="" checked>Background</label>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <br>
                <button type="button" class="btn btn-lg btn-success form-rounded" border>Generate monKey</button>
                <br>
                <br> Monkeys are perfect for avatars. Click on the monKey image in order to download it.
            </div>
        </div>
    </div>
</section>

在此示例中，我将md更改为first和last，这意味着即使在台式机上，我也应该在右侧看到图像，在左侧看到文本，

Answer 1

您的HTML结构是如此混乱。这是我的2美分：

没有嵌套的container
col应该在row之后。
在col md-2上丢失的内容是怎么回事？为何需要一列包裹<br>的列？

清理了HTML结构

<section class="feature section">
    <div class="container">
        <div class="heading"></div>
        <div class="row">
            <div class="col-md-6">
                <form />
            </div>
            <div class="col-md-6 order-md-first">
                <img />
            </div>
        </div>
    </div>
</section>

小提琴： http://jsfiddle.net/aq9Laaew/144878/

在Bootstrap 4上订购不起作用

1 个答案:

清理了HTML结构