订购不适用于 Bootstrap 4

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
• cols 应该紧跟在 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/