如何仅在屏幕较小时向右浮动，而在屏幕较大时向左浮动？

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>

我尝试过使用 float-right/left，但它根本不动。

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/

更新：

你可以使用order utilities 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 Grid 并在默认情况下对齐您想要的对齐方式。然后使用媒体查询，当视图变小时，只需更改网格布局的 div 大小和顺序。

Answer 3

一种常见的更复杂的响应式设计技术是在 CSS 中使用“媒体查询”。

首先，默认情况下按您喜欢的方式对齐项目。然后，为调整大小选择一个限制（例如：“宽度小于 600 像素”）。设置好之后，您可以像这样开始媒体查询：

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

这样做会导致在屏幕宽度小于 600 像素时自动应用对 CSS 规则的更改，但它也应该在屏幕再次增大时恢复为默认值。

媒体查询可能比本示例中的复杂和复杂得多，但是一旦您习惯了它们，它们就会非常有用。我强烈建议阅读它们。