折叠时列的引导顺序

我的第一个 Bootstrap 网站遇到困难，目前，当网站是一个完整的 1920x1080 页面时，我在主巨型下的内容是这样的。

Statement   Image
Image   Statement
Statement   Image

但是当我的网站崩溃到移动大小的版本时，发生了一件不幸的事情，内容显示如下

Statement
Image
Image
Statement
Image
Statement

这显然对用户来说是非常不受欢迎的，它导致用户对哪个图像与哪个语句混淆，并且总体上只是弄乱了网页的当前流程。如何更改引导代码以使列以不同的方式折叠，以便当我折叠到移动时，内容显示例如

Statement
Image
Statement
Image
Statement
Image

我很难找到这个问题的解决方案，我希望其他人以前处理过这个问题，提前感谢任何愿意帮助我的人，意义重大。

格式真的很奇怪，请看一下jsfiddle

.HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<title>ConjugateNow</title>
</head>
<body>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark ">
<a class="navbar-brand" href="#">ConjugateNow.com</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<ul class="navbar-nav mr-auto">
<a class="nav-item nav-link" href="#">Conjugator<span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Games</a>
<a class="nav-item nav-link" href="#">Premium</a>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Username" aria-label="Search">
<input class="form-control mr-sm-2" type="search" placeholder="Password" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Log In</button>
</form>
</div>
</nav>
<div class="container-fluid fixMargin">
<div class="row">
<div class="col-md-8 lightgrey leftJumbo">
<div class="marginCenter">
<h1 class="jumboHeader">Welcome to ConjugateNow.com</h1>
<p>Conjugation technology fueling a generation of students, teachers, and learners</p>
<iframe class="initialVideo "width="560" height="315" src="https://www.youtube.com/embed/HHMxblMz3KI" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
<div class="col-md-4 darkgrey rightJumbo">
<p class="formHeader">Make your free account now</p>
<div class="formBox">
<form>
<div class="form-group text-center">
<label for="exampleFormControlInput1" class="floatLeft">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
<label for="exampleFormControlInput1" class="floatLeft">Username</label>
<input type="user" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
<label for="exampleFormControlInput1" class="floatLeft">Password</label>
<input type="password" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
<label for="exampleFormControlInput1" class="floatLeft">Password</label>
<input type="password" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
<button type="submit" class="btn btn-primary signUpButton">Sign Up</button>
</div>

</form>
</div>
</div>
</div>
</div>
<div class="divider"></div>
<div class="container doubleColumnJumbotron">
<div class="row">
<div class="col-md-6 darkgrey leftCol">
<h1>m Do Lore Lo m Do Lore Lo</h1>
<p>Lorem Ipsunm Do Lore Lorem Ipsunm Do Lore Lorem Ipsunm Do Lore Lorem Ipsunm Do Lore Lorem Ipsunm Do Lore Lorem Ipsunm Do Lore Lorem Ipsunm Do Lore Lorem Ipsunm Do Lore Lorem Ipsunm Do Lore Lorem Ipsunm Do Lore Lorem Ipsunm Do Lore Lorem Ipsunm Do Lore Lorem Ipsunm Do Lore Lorem Ipsunm Do Lore </p>
</div>
<div class="col-md-6 darkgrey marginCenter">
<div id="leftColImg">
<img src="200x200.svg" >
</div>
</div>
</div>   
<div class="row paddingTopMain">
<div class="col-md-6 darkgrey marginCenter">
<div id="leftColImg">
<img src="200x200.svg" >
</div>
</div>
<div class="col-md-6 darkgrey leftCol">
<h1>m Do Lore Lo m Do Lore Lo</h1>
<p>Lorem Ipsunm Do Lore Lorem Ipsunm Do Lore Lorem Ipsunm Do Lore Lorem Ipsunm Do Lore Lorem Ipsunm Do Lore Lorem Ipsunm Do Lore Lorem Ipsunm Do Lore Lorem Ipsunm Do Lore Lorem Ipsunm Do Lore Lorem Ipsunm Do Lore Lorem Ipsunm Do Lore Lorem Ipsunm Do Lore Lorem Ipsunm Do Lore Lorem Ipsunm Do Lore </p>
</div>
</div>
<div class="row paddingTopMain">
<div class="col-md-6 darkgrey leftCol">
<h1>m Do Lore Lo m Do Lore Lo</h1>
<p>Lorem Ipsunm Do Lore Lorem Ipsunm Do Lore Lorem Ipsunm Do Lore Lorem Ipsunm Do Lore Lorem Ipsunm Do Lore Lorem Ipsunm Do Lore Lorem Ipsunm Do Lore Lorem Ipsunm Do Lore Lorem Ipsunm Do Lore Lorem Ipsunm Do Lore Lorem Ipsunm Do Lore Lorem Ipsunm Do Lore Lorem Ipsunm Do Lore Lorem Ipsunm Do Lore </p>
</div>
<div class="col-md-6 darkgrey marginCenter">
<div id="leftColImg">
<img src="200x200.svg" >
</div>
</div>
</div>
<div class="divider"></div>
<div class="row callToAction paddingTopMain darkgrey">
<div class="col-md-12 callToActionDiv">
<h1>
What are you waiting for?     
</h1>
<h3>Start conjugating now for free</h3>
<button>Go now</button>
</div> 
</div>
<div class="divider"></div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4  bottomPageInfo ">
<ul>
<li class="initialListItem">ConjugateNow</li>    
<li><a href="#">AAAAA</a></li>
<li><a href="#">CCCC</a></li>
<li><a href="#">EEEEE</a></li>
</ul>
</div>
<div class="col-md-4  bottomPageInfo">
<ul>
<li class="initialListItem">Cooper Co.</li>    
<li><a href="#">EEEEE</a></li>
<li><a href="#">ZZZZZ</a></li>
<li><a href="#">ZZZZZ</a></li>
</ul>
</div>
<div class="col-md-4  bottomPageInfo">
<ul>
<li class="initialListItem">Our Team</li>    
<li><a href="#">LLLLLLLL</a></li>
<li><a href="#">EEEEEE</a></li>
<li><a href="#">TTTTTTTT</a></li>
</ul>
</div>
</div>
</div>


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

代码：https://jsfiddle.net/mtpebs1x/

使用列排序类。例如，这里的order-md-2放在左边col-md-6这使得此列的顺序在md和向上的屏幕宽度上排名第二。在屏幕宽度sm和xs上，列将按第 1 位订购。

https://www.codeply.com/go/H6IaMUGQyR

<div class="row paddingTopMain">
<div class="col-md-6 order-md-2 darkgrey leftCol">
<h1>m Do Lore Lo m Do Lore Lo</h1>
<p>...</p>
</div>
<div class="col-md-6 darkgrey marginCenter">
<div id="leftColImg">
<img src="//placehold.it/200x200">
</div>
</div>
</div>

相关内容

最新更新

热门标签：