我的第一个Bootstrap网站遇到了困难，目前，当网站是一个完整的1920x1080页面时，我在主jumbotron下的内容是这样的。
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>
答案 0 :(得分：0)
使用column ordering classes。例如，此处 order-md-2 放在左侧col-md-6，这使得此列的顺序在md上排在第2位，屏幕宽度增加。在sm和xs屏幕宽度上，col将按顺序排列。
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>