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

Question

我想有一个效果，当图片是在左边的文字，但当屏幕是较小，文字在顶部和img在下面。

目前，我有前者，但当屏幕尺寸缩小时，img在顶部，文本在底部。我怎么才能扭转这一切？

下面是我的代码( img有一个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/

更新：

您可以使用订单实用程序类来实现您想要的结果：

<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 ex”)。设置好之后，就可以开始如下所示的媒体查询：

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

这样做将使CSS规则的更改在屏幕宽度小于600 to时自动应用，但当屏幕大小再次增大时，它也应该恢复到默认值。

与本例相比，媒体查询可能变得更加复杂和复杂，但一旦您习惯了它们，它们就会非常有用。我强烈建议给他们读读。