如何僅在屏幕較小時向右浮動，而在屏幕較大時向左浮動？

Question

我想要一個圖片在文本左側的效果，但是當屏幕較小時，文本在上面，img 在下面。

目前，我有前者，但是當屏幕尺寸減小時，img 在頂部，文本在底部。 我該如何扭轉這個？

這是我的代碼（img 有一個 div，描述文本有一個 div）：

<div class="container productwrap shadow-lg mt-3">
    <div class="row">
        <div class="col-md-4 p-2 m-3 border">
            <img src="../Pictures/snacks3.jpeg" alt="snacks2">
        </div>
        <div class="col-md-7 p-2 my-3 border rounded">
            <p class="newarrival text-center pt-3 font-weight-bold">Trendy Snacks</p>
            <h2 style="display: inline-block" class="p-3 ml-2 border rounded">Brown Sugar Yogourt</h2>
            <span class="badge badge-success align-top m-1">NEW!</span>
            <p class="lead font-weight-bold text-warning m-4">CAD $9,99</p>
            <p class="m-4"><strong>Unit: </strong>2 x 100g</p>
            <p class="m-4"><strong>Availability: </strong>In Stock</p>
            <label for="qty" class="ml-4"><strong>Quantity:</strong>
                <input type="text" id="qty" name="qty" class="small w-25 text-right" value="1">
                <button class="btn btn-outline-success btn-sm" href="#" role="submit">Add to Cart</button>
            </label>
            <p>
                <button class="btn btn-info btn-sm m-2 mr-3 rounded-pill" data-toggle="collapse" data-target="#moreinfo">More info</button>
                <div id="moreinfo" class="collapse text-wrap">
                This delicacy instills the careful mix of brown sugar and yogourt. Its rich nutriments will revitalize your spirit and set you ready for your day.
                </div>
            </p>
        </div>
    </div>
</div>

我曾嘗試使用浮動右/左，但它根本沒有讓步。

Answer 1

我想要一個圖片在文本右側的效果，但是當屏幕較小時，文本在上面，img 在下面。 目前，我有前者...

我沒有看到你有前者。 在更大的屏幕上，圖片位於文本的左側...

如果您切換圖片結構和文本結構的順序，您可以同時實現：

<div class="container">
    <div class="row">
        <div class="col-md-7">
            ...
        </div>
        <div class="col-md-4">
            <img />
        </div>
    </div>
</div>

演示： https://jsfiddle.net/davidliang2008/5m2z4s90/4/

更新：

您可以使用訂購實用程序 class來實現您想要的：

<div class="container">
    <div class="row">
        <div class="col-md-4 order-2 order-md-1">
            <img />
        </div>
        <div class="col-md-7 order-1 order-md-2">
            ...
        </div>
    </div>
</div>

在小屏幕上，圖像是第二項，所以它會出現在底部。 在中等斷點及以上，您將其切換回來，以便圖像將出現在行的左側。

演示： https://jsfiddle.net/davidliang2008/5m2z4s90/9/

Answer 2

使用 CSS 網格並在默認情況下對齊您想要的對齊方式。 然后使用媒體查詢，當視圖變小時，只需更改 div 大小和網格布局的順序。

Answer 3

一種常見的更復雜的響應式設計技術是在 CSS 中使用“媒體查詢”。

首先，默認情況下根據需要對齊項目。 然后，為調整大小選擇一個限制（例如：“寬度小於 600 像素”）。 一旦你有了這個設置，你就可以像這樣開始一個媒體查詢：

@media (max-width: 600px) {
  *selector* {
    *change you want to make when screen is smaller than 600px*;
  }
}

這樣做會導致對 CSS 規則的更改在屏幕寬度小於 600 像素時自動應用，但它也應該在屏幕再次增大時恢復為默認值。

與此示例相比，媒體查詢可能會變得更加復雜和復雜，但是一旦您習慣了它們，它們就會非常有用。 我強烈建議閱讀一些內容。