使用bootstrap更改8个div的顺序
使用Bootstrap更改8个div的顺序可以通过使用Bootstrap的Flexbox布局来实现。Flexbox是一种强大的布局模型，可以轻松地重新排列和对齐元素。
首先，确保你已经引入了Bootstrap的CSS文件和相关的JavaScript文件。然后，按照以下步骤进行操作：
- 创建一个包含8个div的父容器，可以使用Bootstrap的
container或container-fluid类来创建一个响应式的容器。
<div class="container">
<div class="row">
<div class="col">Div 1</div>
<div class="col">Div 2</div>
<div class="col">Div 3</div>
<div class="col">Div 4</div>
<div class="col">Div 5</div>
<div class="col">Div 6</div>
<div class="col">Div 7</div>
<div class="col">Div 8</div>
</div>
</div>- 默认情况下，Bootstrap的栅格系统会将列按照从左到右的顺序排列。要更改div的顺序，可以使用Bootstrap的
order类来指定每个div的顺序。
<div class="container">
<div class="row">
<div class="col order-1">Div 1</div>
<div class="col order-2">Div 2</div>
<div class="col order-3">Div 3</div>
<div class="col order-4">Div 4</div>
<div class="col order-5">Div 5</div>
<div class="col order-6">Div 6</div>
<div class="col order-7">Div 7</div>
<div class="col order-8">Div 8</div>
</div>
</div>在上面的代码中，每个div都添加了一个order-x类，其中x是一个数字，表示div的顺序。通过更改这些数字，你可以调整div的顺序。
- 如果你想在不同的屏幕尺寸下重新排列div，可以使用Bootstrap的响应式断点类来指定不同的顺序。
<div class="container">
<div class="row">
<div class="col order-1 order-md-2">Div 1</div>
<div class="col order-2 order-md-1">Div 2</div>
<div class="col order-3">Div 3</div>
<div class="col order-4">Div 4</div>
<div class="col order-5">Div 5</div>
<div class="col order-6">Div 6</div>
<div class="col order-7">Div 7</div>
<div class="col order-8">Div 8</div>
</div>
</div>在上面的代码中，order-1和order-2类指定了在默认情况下的顺序，而order-md-2和order-md-1类指定了在中等屏幕尺寸（md）下的顺序。
这样，你就可以使用Bootstrap的Flexbox布局来更改8个div的顺序了。请注意，这只是Bootstrap中一种方法，你也可以使用其他的CSS布局技术来实现相同的效果。
相关·内容
1回答
使用Bootstrap更改平板电脑设备上的布局顺序
html、css、bootstrap-4
我正在尝试让E&F div上面的C div的平板电脑视图的页面正在工作，但似乎找不到任何解决方案，可以帮助。任何建议都将不胜感激。 HTML： <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row flex-container">
&
浏览 21提问于2020-08-27得票数 0
回答已采纳
3回答
如何让这两个“颜色”堆栈在手机上以不同的顺序排列？引导程序4
javascript、html、twitter-bootstrap
我在桌面上可以正确显示它们的col 8和col 4，但在移动设备上，它们堆叠的顺序不正确。我如何附加bootstrap类，以使它们以另一种方式堆栈。 <footer class="container-fluid footerInfo">
<div class="row">
<div class="col-md-8 f1">
<h6>Advocacy Inc.</h6>
<div class="cont
浏览 39提问于2019-02-01得票数 1
1回答
如何在移动视图中的特定位置将单行中的两个不同列定位？
html、css、bootstrap-4
我有下面的代码，在移动视图中，它显示在段落后面的图像，就像它应该显示的那样。但我希望图像显示在子标题之后，就在移动视图中的段落上方。尝试了flex和所有的东西，但是图像总是出现在标题上方。有什么方法，我可以做到这一点，只用html和css。
<div class="row">
<div class="col-md-10 col-lg-6">
<div> Some Image Here </div>
</div>
<div class="col-l
浏览 0提问于2018-07-02得票数 0
回答已采纳
1回答
引导使左列在堆叠时低于
html、css、bootstrap-4
我有一个具有以下结构的页面：
<div class="row">
<div class="col-md-3"> LEFT </div>
<div class="col-md-6"> CENTER </div>
<div class="col-md-3"> RIGHT </div>
</div>
这样的结果就像
LEFT CENTER RIGHT
但是，在较小的屏幕中，
浏览 4提问于2021-03-18得票数 2
回答已采纳
1回答
如何在引导程序上移动小屏幕中的列？
bootstrap-4、responsive、bootstrap-grid
我有三栏
(1) ..col md-4区(2) .4区(3) .2区(4) ..col md-2
我希望这个在小屏幕(电话/小屏幕)作为：
(1) \x{e76f}
(2) \x{e76f}
浏览 5提问于2017-11-29得票数 1
1回答
定义和调用自定义javascript函数的语法
javascript、jquery
如何从jQuery单击事件中调用自定义函数？
我定义了一个执行某些操作的clearOrder函数。然后，当我单击DOM元素时，我想调用该函数，然后执行更多的操作。
这些操作只是简单地应用和删除类。如您所见，在向DOM元素添加特定类之前，我希望清除元素中指定的现有类作为一种重置。
html
<div id="neti" class="tile"> contents </div>
<div id="sife" class="tile"> contents </div>
javascrip
浏览 2提问于2014-05-30得票数 0
回答已采纳
4回答
如何更改移动布局上的引导4列顺序？
html、css、bootstrap-4、multiple-columns
当我调整到可移动的大小时，我想把列的元素按一定顺序排列。守则是：
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-sm-1">1</div>
<div
浏览 13提问于2019-11-06得票数 3
3回答
使用引导程序4为div排序
html、bootstrap-4
如果我有2个div，并且我想根据屏幕大小断点以不同的顺序显示它们，是否必须为每个大小指定顺序？例如
<div class="order-xs-2 order-sm-2 order-md-2 order-lg-1 order-xl-1">
<div class="order-xs-1 order-sm-1 order-md-1 order-lg-2 order-xl-2">
当我尝试这样做时，除了xs之外，它们在所有尺寸上都出现了正确的外观，在那里它们是错误的，所以我怀疑我做错了。
浏览 0提问于2019-07-03得票数 1
回答已采纳
6回答
如何逆转Bootstrap 4中列的顺序？
css、bootstrap-4
我有一个简单的场景：
<div class="row">
<div class="col-md-12 col-lg-6 col-xl-7">A</div>
<div class="col-md-12 col-lg-6 col-xl-5">B</div>
</div>
基本上如果md
A
B
我想要，如果md
B
A
我试过很多在网上找到的变体，比如flex-first和诸如此类的东西。似乎不能让它起作用
有什么想法吗？
浏览 5提问于2017-10-10得票数 66
回答已采纳
1回答
我可以改变Bootstrap放置列的方式吗？
flexbox、bootstrap-4、smarty
我正在寻找一种方法来使行与8列-md-6div显示在一个不同于通常的方式。
bootstrap通常如何做到这一点：
我想要的是：
数字列是动态的，例如，它可以超过20，并且是一个偶数。
代码：
<div class="row">
{foreach from=$item.Opties|default:array() name=optie item=optie key=key}
<div class="col-md-6">
test {$optie@iteration} (normall
浏览 1提问于2018-10-31得票数 0
2回答
Bootstrap右手边需要出现在移动端的左侧div上方
bootstrap-4
在桌面视图中，这看起来像我想要的，但在移动视图中，边框移动到主框的下方。我想把它放在上面。我该怎么做？ https://jsfiddle.net/b4032v7z/2/ <body>
<div class='container'>
<div class="row">
<div class='bg-primary text-white col-md-7 offset-md-1'>Main Box
</div>
<div class=' bg-da
浏览 44提问于2019-05-22得票数 1
回答已采纳
1回答
为什么在移动平台上引导列的顺序不改变？
html、twitter-bootstrap、bootstrap-4
我有一个自举的div命令：
在普通电脑上，我想：
first second third
但在手机上我想：
third
second
first
我检查了引导网格系统页面，并得出如下结果：
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport"
浏览 0提问于2018-03-24得票数 1
回答已采纳
1回答
如何在Bootstrap 4中生成奇数/偶数科尔？
css、twitter-bootstrap、mobile、grid、bootstrap-4
我有一个区域，它必须包含左边的图像和右边的文本，在下一个部分，我的意思是，左边的文本和右边的图像。这是我的html：
<section>
<div class="container">
<div class="row no-gutters">
<div class="col-md-6"><img src="image.png" alt="" class="img-fluid"
浏览 0提问于2018-08-26得票数 0
回答已采纳
2回答
引导4x:您能根据视口大小更改列顺序吗？
html、css、bootstrap-4
引导是伟大的，因为它能够重新排序列，无论HTML结构，但我想有一个不同的顺序，这些特定的元素时，在一个较小的视口大小(如移动)。
HTML的结构类似于：
[Page Content]
[Nav Links]
[Sidebar]
使用Bootstra4.1及其在Nav链接和Sidebar上的order-first/order-末位类，页面适当地显示如下：
[Nav Links] [Page Content] [Sidebar]
然而，我想要发生的事情，当视口缩小到突破门槛，对于Nav链接返回到页面内容下面，就像一个好的小家伙。Bootstrap文档似乎没有深入到这类实现中，尽管我在这里发现了一个
浏览 1提问于2019-01-24得票数 1
回答已采纳
1回答
交换列只适用于移动版本引导-lg-6
html、css
我有一个表单，我从使用bootstrap.min.css col-lg-6的表单中插入了一个片段。
现在，当屏幕宽度很大时，第一列文本将在左边，按钮在右边。
当宽度很小的时候，假设是移动的，那么带有文本的列将位于顶部，按钮将位于底部
我想让事情保持不变的大宽度，文字在左边，按钮在右边。对于移动设备，我希望它是相反的，按钮在顶部，文本在底部。
到目前为止，我唯一的想法是制作2个按钮，并根据屏幕大小隐藏额外的按钮。
但还有别的办法吗？
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap
浏览 4提问于2022-10-09得票数 0
回答已采纳
1回答
基于Bootstrap 4 Beta 0网格系统的Rowspan
html、twitter-bootstrap、css、responsive-design、bootstrap-4
嗨，我正在做一个eCommerce模板，它使用的是Bootstra4Beta。我让它在移动平台上工作，但在桌面上，我想不出如何使Box保持在标题之下。在我的展览室下面。
理想桌面
期望移动
<div class="container-fluid">
<div class="row">
<div class="col-xl-1 d-none d-md-block"></div>
<div class="col-xl-10 col-12&
浏览 1提问于2017-08-27得票数 4
回答已采纳
1回答
Bootstrap4 beta中列的不正确排序
bootstrap-4
根据屏幕的大小，我想以不同的顺序显示列。
1)对于MD或更大的部分，我希望在单行(3 cols/行)1中显示S、M、L、XL ( sm或更小)，我希望每一行显示两列，但也希望重新排序内容，从一行的XL、L开始，下一行显示M、S。
忽略这些子弹，试图显示一个2x2表
M=S
下面是我的代码，但它不能正常工作。
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta-name="viewpor
浏览 0提问于2017-11-20得票数 0
1回答
引导v4推拉消失
html、css、bootstrap-4
查看引导v4更新：
...Dropped推和拉修改器类为新的柔性箱驱动订单类.例如，您应该使用.col-8.order-2和.col-4.order-1，而不是.col-8.ush-4和.col-4.pl-8。
但是，当我使用order函数时，它的工作方式似乎与推拉方法不同。它将行堆叠起来，就像下面代码中的第一行一样。
我的目标是在左边有一个img，在一行上有一个文本，然后在左边有一个文本，在桌面上的下一行有一个img。当它在一个较小的屏幕上调整大小时，我希望每一张图像都堆放在它对应的文本上。
<div class="container">
<
浏览 3提问于2017-11-12得票数 7
回答已采纳
2回答
Bootstrap:在小显示中一个接一个地推送列
html、bootstrap-4
在比移动设备更大的显示器中，我希望有这样的配置(按以下顺序)：
列-A大2列-B大8列-C大2
在mobile中，我希望(在不同的行中)第一列在第二列之后的移位：
列-B大12列-A大6列-C大6
有人能告诉我这是不是可能的，如果是，我该怎么办？谢谢
<div class="container">
<div class="row">
<div class="col-lg-2"></div>
<div class="col-lg-8"
浏览 0提问于2018-06-27得票数 1
1回答
如何在不同屏幕上将一张卡设置在左边，从下到下设置为第二张卡
html、bootstrap-4
我刚开始进行Web开发，我用引导-4构建了一个简单的HTML网页。
我想要显示2张卡水平，所以图像卡将在左边的文字卡。当屏幕很小时，我希望图像在文本卡下面。但如果卡在左边到第二张卡，它会自动显示在上面。
我的代码是这样的
<div class="container">
<div class="card mb-3">
<div class="row no-gutters">
<div class="col-md-5">
<i
浏览 0提问于2019-07-02得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
