程序员经验分享-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 - 如何在移动设备上更改顺序？ 的相关文章

  • 在 Chrome 中使用 webkit-transform 旋转时出现不稳定的文本抗锯齿效果

    我正在使用旋转元素 webkit transform rotate 在 Chrome 14 0 835 2 dev m 中 它对元素内的文本做了一些非常奇怪的事情 它让我想起了在 Photoshop 中使用 平滑 抗锯齿而不是 清晰 旋转文

  • 是否可以使materialize.css模态更大并删除垂直滚动条？

    我刚刚创建了按钮 单击后会弹出一个模式 每个按钮都有一个显示不同练习 gif 的模式 然而 模态框太小 导致用户无法看到整个 gif 迫使他们向下滚动 我想删除滚动条并使模态更大 以便用户可以看到整个 gif 任何帮助都会很棒 这是我的代码

  • 如何在asp.net背后的代码中获取css样式

    我需要从 asp net c 中的代码后面获取 css 样式 在网上没有找到解决方案 是否可以直接从 styles css 文件获取它 还是需要解决方法 我在我的网络应用程序中使用主题 但我还需要进行一些服务器处理 并且我需要 ccs 文件

  • 使用非常大的背景位置偏移是否存在性能问题？

    我正在构建一个进度条控件 并且正在研究它实际上并不显示进度 而只是旋转 正在发生某事 的指示器的情况 我的设计基本上是交替的对角条纹 本质上是一个像这样的理发杆 但是 旋转 由于希望将尽可能多的负载转移给渲染引擎 我想为此使用 CSS 过渡

  • CSS 内边框？

    我纯粹用 CSS 创建了左侧的按钮 它是一个div 中的一个div 然而 右侧的三个按钮是background属性于img标签 我这样做是为了按照以下说明模拟翻转效果here http kyleschaeffer com best prac

  • 如何按时间间隔翻转div

    您好 请看这个脚本并告诉我如何按时间间隔翻转 A B 和 C div 我希望A先翻转然后停止 B接下来翻转并停止 然后C然后再次回到A B和C 就像循环一样 然后重新开始 这在 CSS3 中可能吗 在此代码中 所有 div 同时翻转 HOL

  • 如何将本地文本文件上传到文本区域（网页内）

    我是一名新手程序员 需要一些帮助来弄清楚如何将本地文本文件上传到我正在构建的网站内的文本区域 我非常精通 HTML CSS 对 Javascript JQuery 有相当的了解 而且我刚刚学习 PHP 您能提供的任何帮助我将不胜感激 我有一

  • SVG线宽问题

    我开始了我的svg学习 我想用svg线做一些技巧吧 但有件事我不明白 我为每个技能创建 2 行 一行是空的 另一行是知识百分比 问题是 前两行的高度是我给出的笔画宽度的一半 其他线都有很好的高度 这是一个 jsbin http jsbin

  • 什么可能导致 Firefox 中出现此 HTML/CSS 渲染问题？

    款式 h2 color 71D0FF font size 11px font weight bold margin 0px 0px 5px 0px a box color FFFFFF important cursor pointer di

  • 如何防止输入文本中出现“后重音”

    我相信这是一个简单的问题 但在谷歌上搜索几个小时后我找不到任何答案 也许我无法在搜索中使用正确的单词 P 我有一个 javascript 方法 可以防止用户用数字以外的其他字符填充文本框 如下面的代码所示 它在 KeyDown 事件中使用

  • 将文本字段限制为仅包含数字的最佳方法？

    I m using the following Javascript to restrict a text field on my website to only accept numerical input and no other le

  • CSS 选择器嵌套

    是否可以在选择器中嵌套选择器 我有很多类似这样的样式 header h1 header img header form 我想压缩它们 使它们看起来像这样 header h1 img form 以提高可读性 这在普通的旧 CSS 中可能吗 不

  • Sphinx内联代码高亮

    我使用 Sphinx 制作一个包含代码示例的网站 我成功地使用了 code block获取语 法高亮的指令 但我无法使用此代码获得内联语法突出显示 role bash code language bash Test inline bash

  • 居中

    我的问题 http i56 tinypic com ff3jmo png http i56 tinypic com ff3jmo png 项目符号点未对齐 我要做的只是 text align center ing ul 所在的类 我可以对齐

  • 如何使用 Javascript 在 html 文件中搜索字符串？

    我有 5 个 html 文件 并且有一个搜索表单 我想用它来搜索这些 html 文件中的文本

  • 悬停时的 CSS 过渡

    我有个问题 实际上 当我将鼠标悬停在对象上时 我尝试在 div 上进行转换 所以基本上我有一个div 当我将鼠标悬停在div上时 它应该在其顶部显示另一个div 但是它应该被转换 这样悬停效果会更平滑 如果我有这两个 div 怎么可能 di

  • 表单 CSS：根据选中/未选中状态设置单选框的父级（标签）样式

    所以我有一个表格 表格中提出的大多数问题都是使用无线电输入 我要和

  • 标题的下边框小于宽度

    我需要创建一个下划线效果底部边框小于h2标题的宽度 通常我不上传图片 但我认为这可能有助于进一步解释问题 您可以为此使用伪元素 例子 http jsfiddle net SZ39x pseudo border position relati

  • html中锚标记中href和data-href的区别

    html中的href和data href属性有什么区别 a a 标签 我当前的代码写如下 a href verify phone process 1 html class btn btn default bubbla btn Sign In

  • 深层嵌套 Flexbox 布局是否会导致性能问题？

    我一直在开发一个 ReactJS 项目 其中我使用 Flexbox 布局创建了大部分组件 由于使用 React 我们可以拥有深度嵌套的组件 因此我的布局具有嵌套的 Flexbox 布局 现在我的问题是 这对性能有任何问题吗 在一个页面上 有

随机推荐

  • 一键运行 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

热门标签