Bootstrap 4 - 屏幕左侧图像旁边的文本...在图像下方的智能手机上答案

【问题标题】：Bootrap 4 - Text on Screen left beside an image ... on Smartphone Text under the imageBootstrap 4 - 屏幕左侧图像旁边的文本...在图像下方的智能手机上
【发布时间】：2020-05-03 08:06:23
【问题描述】：

使用 Bootstrap 4（可能还有所有其他版本）我如何确保屏幕上的文本位于图像的左侧，并且图像位于智能手机上的文本上方？

这是我的源代码：

<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">Text</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">Image</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">Image</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">Text</div>
</div>
</div>

flex-direction: row-reverse 在这里不起作用。

【问题讨论】：

您好，欢迎来到 StackOverflow！您也许可以包含一个屏幕截图来解释您在此处尝试实现的目标？

标签： html css web bootstrap-4 media-queries

【解决方案1】：

使用.order 类来定位图像：

<div class="container">
  <div class="row">
    <div class="col-md-6 col-12">Text</div>
    <div class="col-md-6 col-12 order-first">Image</div>
  </div>
  <div class="row">
    <div class="col-md-6 col-12 order-first">Image</div>
    <div class="col-md-6 col-12">Text</div>
  </div>
</div>

https://getbootstrap.com/docs/4.4/layout/grid/#order-classes

您还可以根据宽度使用通常的 xs、sm、md、lg 和 xl 标签添加它们，例如.order-md-first

https://jsfiddle.net/Sirence/cx6k1048/4/

【讨论】：

【解决方案2】：

最好的方法是用 row 类将两个类添加到两个外部 div。然后根据屏幕大小使用媒体查询隐藏div，所以你的代码应该是这样的。

<div class="container">
<div class="row desktopView">
<div class="col-lg-6 col-md-6">Text</div>
<div class="col-lg-6 col-md-6">Image</div>
</div>
<div class="row mobileView">
<div class="col-sm-6 col-xs-12">Image</div>
<div class="col-sm-6 col-xs-12">Text</div>
</div>
</div>


@media (max-width: 576px) {
.desktopView {
  display: none;
}
.mobileview {
  display: block;
}
}

@media (min-width: 576px) {
.mobileview {
  display: none;
}
}

您首先在桌面视图上隐藏移动 div，然后在移动视图上显示它。希望对@davideos477有所帮助

【讨论】：

【解决方案3】：

如果您使用 bootstrap-4 并且在移动设备上需要 100% 宽度，则不需要包含 col-xs 或 sm 类。
而bootstrap-4 正在使用flexbox。借助 flexbox，您可以轻松地在不同屏幕上订购 div。
对于引导程序排序，您可以使用order-* 类。而order 类也与根据屏幕类似：order-sm-* 或order-md-*
Bootstrap 4 网格示例：Bootstrap 4 Grid example
用于了解 flexbox 排序。请查看Flexbox Ordering

<div class="container">
    <div class="row">
        <div class="col-md-6 col-12">Text</div>
        <div class="col-md-6 col-12">Image</div>
     </div>
    <div class="row">
        <div class="col-md-6 col-12">Image</div>
        <div class="ccol-md-6 col-12">Text</div>
    </div>
</div>

【讨论】：