程序员经验分享-hwhale

Bootstrap 4 - 如何在移动设备上更改顺序？

2024-02-16

我正在使用 Bootstrap 4 制作一个由两列组成的响应式布局。两列总共有 9 个 div，第一列有 4 个，第二列有 5 个。如果断点低于 LG，我想更改列内 div 的顺序。

这是我想要实现的解释和正确的顺序：

我目前拥有的：

<div class="container">
    <div class="row">
        <div class="col-lg-8">
            <div class="mb-4">
                left 1
            </div>
            <div class="mb-4">
                left 2
            </div>
            <div class="mb-4">
                left 3
            </div>
            <div class="mb-4">
                left 4
            </div>
        </div>
        <div class="col-lg-4">
            <div class="mb-4">
                right 1
            </div>
            <div class="mb-4">
                right 2
            </div>
            <div class="mb-4">
                right 3
            </div>
            <div class="mb-4">
                right 4
            </div>
            <div class="mb-4">
                right 5
            </div>
        </div>
    </div>
</div>

Bootstrap 4 中的列的视觉顺序可以更改，因为它使用了弹性框。响应式使用 flex 排序课程 https://getbootstrap.com/docs/4.0/utilities/flex/#order可以使用。
我们可以为每个视口指定不同的顺序。
使用 order-xs-12,order-sm-2,order-md-0, order-lg-5, order-xl-last。我们可以指定从 0-12 的列顺序，order-first 和 order-last第一列和最后一列。

 <div class="container">
 <div class="row ">
   <div class="col-lg-8  col-md-6 col-sm-12 d-flex flex-column ">
     <div class="mb-4">
     left 1
     </div>
     <div class="mb-4 bg-info order-sm-last order-md-first order-lg-last ">
     left 2
     </div>
     <div class="mb-4">
     left 3
     </div>
     <div class="mb-4">
     left 4
     </div>
   </div>
   <div class="col-lg-4 col-md-6 col-sm-12 d-flex flex-column">
     <div class="mb-4">
     right 1
     </div>
     <div class="mb-4">
     right 2
     </div>
     <div class="mb-4 bg-success order-lg-last order-md-first order-sm-
    first">                
     right 3
     </div>
     <div class="mb-4">
     right 4
     </div>
     <div class="mb-4">
     right 5
     </div>
   </div>
</div>
</div>

On Larger Screen **On Larger Screen**

On Medium Screen **On Medium Screen**

On Small Screen **On Small Screen**

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

Bootstrap4

Bootstrap 4 - 如何在移动设备上更改顺序？ 的相关文章

  • 通过 JavaScript 检测浏览器换行

    我需要 javascript 来检测每个浏览器包装的文本行并将其包装到 span class line 我读过一些关于测量每个单词的 y 轴的文章 但还没有看到可靠的解决方案 这是我到目前为止所拥有的 看到它Jsfiddle http js

  • 使用纯javascript选择最接近id的id

    div div TEXT div div div div TEXT div div div TEXT div 如何选择最接近div1的div2 关注w3docs https www w3 org TR html4 struct global

  • 为什么在 HTML 中使用 onClick() 是一种不好的做法？

    我多次听说使用 JavaScript 事件 例如onClick 在 HTML 中是一种不好的做法 因为它不利于语义 我想知道以下代码有什么缺点以及如何修复 a href link a 你可能正在谈论不引人注目的 JavaScript htt

  • CSS3 box-shadow 用于类似重叠的 div

    我正在尝试用css3来实现这种效果 HTML 代码显然是这样的

  • 将样式添加到 mat-autocomplete 的 mat-option

    我有这个 HTML代码在这里 https stackblitz com edit angular mat autocomplete with selected value vx1uqg file src 2Fapp 2Fautocomple

  • 使用 或 实现可访问性的更好做法是什么？

    我有一个下载链接 但我找不到任何良好的可访问解决方案来说明如何处理这种情况 我遵循一个共同的经验法则 按钮做事 链接去地方 我的情况是 我有一个触发文档下载的按钮 同一页面 我相信这应该是一个具有按钮角色的锚点 因为它明确不触发重定向或导航

  • 从 thymeleaf 获取数据到模态引导程序、jquery

    我正在尝试获取模态视图的 id 这是为了更新 onclick 元素 但我找不到方法 知道如何为 boostrap 5 完成此操作 或我可以用其他方法吗 谢谢 tr a inactivate a div class modal fade mo

  • CSS 中的像素与像素密度

    我对 HTML 和 CSS 非常陌生 我突然想到 当决定某个东西是 5px 时 比如说 由于像素的物理尺寸取决于密度 所以 5px 在 100 ppi 的屏幕上看起来肯定比在 300 ppi 的屏幕上看起来更大ppi 这是正确的吗 如果是

  • 如何重定向到 instagram://user?username={username}

    我的 html 页面上有这个链接 可以在特定用户上打开 Instagram 应用程序 a href Link to Instagram Profile a 我一直在寻找自动运行 url instagram user username USE

  • 禁用引导列上的滚动

    我正在尝试禁用引导列上的滚动 这是我的代码 div class container fluid h 100 div class row h 100 div class col 4 h 100 bg dark fixed div div cl

  • 如何将 Google Charts 与 Vue.js 库一起使用？

    我正在尝试使用 Vue js 库使用 Google Charts 制作图表 但我不知道如何添加到 div 这是我尝试做的 这是如何使用普通 javascript 添加图表 这是文档的代码示例 https developers google

  • jquery从变量中删除html元素

    我将 html 保存在变量中 var itinerary events today html 我有很多 html 和一个按钮我想删除 它的 ID 为 myButton 如何从变量中保存的 html 中删除它 我建议这种方法 var itin

  • 如何在使用页面锚点导航时设置“激活”类以在 Angular 2 中引导导航栏？

    我正在使用 Angular 2 和 Bootstrap 4 创建一个单页网站 我创建了一个始终位于页面顶部的导航栏组件 并且我正在使用页面锚点导航 id 请注意 我还没有创建路由模块 到目前为止还没有必要这样做 导航栏代码如下

  • 动态img（或视频）标签根本不加载资源，HTTP请求处于“待处理”状态

    我尝试使用以下方法在 Web 应用程序上加载资源时遇到一些问题img or videoHTML 标签 我在我的应用程序中使用 Angular 并动态设置src的参数img标签 使用ng src src 指示 没有那么多图像和资源需要加载 在

  • HTML 离线应用程序缓存，列出下载的文件

    作为我正在构建的离线 Web 应用程序的加载屏幕的一部分 使用缓存清单 http developer apple com library safari documentation iPhone Conceptual SafariJSData

  • 避免响应式页面的重复内容

    我目前正在做一个涉及响应式设计的项目 整个布局应该使用HTML和CSS来实现 我知道可以使用 java 脚本将内容从一个列布局移动到另一列布局 而无需复制内容 但是使用 HTML 和 CSS 是否可以实现相同的效果 以下面的例子为例 它会在

  • FireFox 中的自动滚动

    我的应用程序是实时聊天 我有一个 Div 来包装消息 每条消息都是一个 div 所以 在几条消息之后 我的 DOM 看起来像这样 div div Message number two div div div div

  • 更改文本输入标签中文本的大小？

    我有一个很大的文本输入框 但我无法更改字体大小

  • 带有相对路径的 LESS CSS 背景

    我在使用 LESS 作为我的网站的样式表时遇到了问题 就我个人而言 我宁愿在CSS中使用相对路径而不是绝对路径 这只是我的习惯 但是现在当我使用带有导入功能的LESS时 我遇到了如下所示的问题 我有一个main less根文件夹中的文件 i

  • 如何获取浏览器视口中当前显示的内容

    如何获取当前正在显示长文档的哪一部分的指示 例如 如果我的 html 包含 1 000 行 1 2 3 9991000 并且用户位于显示第 500 行的中间附近 那么我想得到 500 n501 n502 或类似的内容 显然 大多数场景都会比

随机推荐

  • 一键运行 Javascript 2 个函数

    我使用从网上下载的 HTML 和 JS 代码来录制音频 但有一个问题 因为页面加载到屏幕上后立即出现允许麦克风的消息 正是因为window onload function init 在源代码record js中 但我想在单击按钮后显示消息

  • 在控制台应用程序中捕获 ctrl+c 事件（多线程）

    我有一个控制台应用程序的主线程 它以这种方式运行很少的外部进程 private static MyExternalProcess p1 private static MyExternalProcess p2 private static M

  • 304 未修改问题

    抱歉 标题可能有误 我正在编写一些代码来处理 If Modified Since 和 If None Match 请求作为缓存的一部分 除了 PHP 在标头后面返回一些内容 空行 之外 一切都很完美 页面内容应该为空 我正在使用的代码是

  • 是否可以将别名模板标记为好友？

    想象一下我们有这样的代码 template

  • 在字符串文字中展开宏

    我想做的是 define一个宏 define a 2 然后在字符串文字中使用它 string a 我希望该字符串不被解释为字符串 而是获取值a 即2 我没有成功 有人可以帮忙吗 define STRINGIFY2 X X define ST

  • 参数作用域与局部变量作用域？

    我正在读我的 AP cs 书 它谈到了三种类型的变量 实例变量 局部变量 参数 实例变量在整个类中都是可见的等等 参数只能在方法内使用 局部变量也是如此 因此 我的问题是 如果参数和局部变量包含相同的范围 为什么他们会将参数和局部变量分类为

  • MySql 适合大型数据库吗？ [关闭]

    Closed 这个问题需要细节或清晰度 help closed questions 目前不接受答案 我在一家公司工作 我们总是访问外部网站以获取信息 该网站是由一家过时的软件开发公司开发的 该公司甚至没有网站 他们在我所在的州几乎拥有垄断地

  • 如果 Blob URL 是不可变的，Media Source Extension API 如何使用它们来流式传输视频？

    让我们从一个例子开始 您访问 youtube com 该网站在某些设备上使用带有 HTML5 的媒体源扩展 MSE MSE 使用 blob URL 注入 标记 它看起来像这样 blob https www youtube com blahb

  • 了解 xargs 中的递归 grep

    以下两个命令之间有什么实际区别 命令A find type f print0 xargs 0 grep r masi 命令B find type f print0 xargs 0 grep masi 简而言之 命令 A 的实际好处是什么 N

  • 使用Python将文件加载到内存中

    我尝试使用以下命令将文件加载到内存中 import mmap with open path fileinput example txt rb as f fileinput mmap mmap f fileno 0 prot mmap PRO

  • Python Pandas 用户警告：由于非串联轴未对齐而进行排序

    我正在做一些代码练习并在执行此操作时应用数据帧合并 收到用户警告 usr lib64 python2 7 site packages pandas core frame py 6201 FutureWarning 由于非串联轴未对齐而进行排

  • python Flask如何将动态参数传递给装饰器

    我正在使用 python Flask 框架 我写了一个装饰器 它需要一个参数 并且这个参数将是动态的 我的装饰器如下所示 将获得一个密钥 并使用该密钥从 Redis 获取数据 def redis hash shop style key de

  • JOINed 表中的条件显示错误 CakePHP

    我有两张桌子employee personals存储员工的所有个人记录的地方telephone bills其中存储每月支付给特定员工的电话账单 现在在我的employeePersonalsController php我有一个函数叫做api

  • Excel、Vba 宏可将形状“移动”到不同的形状，无需复制和粘贴

    我想将形状移动到不同的工作表 而不在宏中使用复制和粘贴 还有其他方法可以做到这一点吗 如果形状是图表对象 您只需更改其位置即可 ActiveChart Location Where xlLocationAsObject Name Sheet

  • 我可以将编译的系统库（例如 libxml2）合并到可以部署到 Heroku 的 gem（例如 nokogiri）中吗？

    Nokogiri 在与 UTF 8 字符之间进行转换时遇到问题 结果发现该问题来自 libxml2 特别是版本 2 7 6 这是 Ubuntu 10 04 LTS 上支持的最高版本 该错误在 2 7 7 及更高版本中得到修复 但由于我们的应

  • 如何使用张量流和卷积神经网络检测和定位对象？

    我的问题陈述如下 使用 Tensorflow 和卷积神经网络进行对象检测和定位 我做了什么 我已经使用 tflearn 库完成了从图像中进行猫检测 我成功地使用 25000 张猫图像训练了一个模型 并且其工作良好且准确 Current Re

  • 日志记录挂钩的挂钩过程从未被调用

    我正在尝试创建一个简单的应用程序来记录和播放一系列键盘和鼠标命令 宏 阅读文档并得出结论 最合适的实现 如果不是唯一的实现 是设置 Windows 日志记录挂钩 WH JOURNALRECORD 并用日志回放一个 WH JOURNAL PL

  • C++ 将 float* 转换为 glm::vec3

    如何以表单形式投射浮点数数组float to glm vec3 我以为我以前做过 但我丢失了硬盘 我尝试了一些C风格static cast但我似乎无法让它工作 From float to vec3 float data 1 2 3 glm

  • 枚举*所有*哈密尔顿路径

    我知道以前有人问过这个问题 但我没有在任何帖子中找到答案 有人可以建议我一个枚举图中所有哈密顿路径的算法吗 一点背景知识 我正在研究一个问题 其中我必须枚举每个哈密顿路径 进行一些分析并返回结果 为此 我需要能够枚举所有可能的哈密尔顿路径

  • Bootstrap 4 - 如何在移动设备上更改顺序？

    我正在使用 Bootstrap 4 制作一个由两列组成的响应式布局 两列总共有 9 个 div 第一列有 4 个 第二列有 5 个 如果断点低于 LG 我想更改列内 div 的顺序 这是我想要实现的解释和正确的顺序 我目前拥有的 div c

热门标签