问题
This is what I want it to look like on a full-screen desktop/laptop.
On medium / smaller devices, I want the right sidebar to collapse in and under the search input area and before the content area.
Smaller Devices (Fold sidebar into)
I think this can be achieved with Bootstrap order classes but not sure about what grid layout structure (container, rows, columns) to achieve this.
The code below shows a large blank area below the search area when on xl screens. I want the content area to fill this blank area immediately after the search.
Full copy/paste working example:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="ie=edge" http-equiv="X-UA-Compatible">
<link href="css/bootstrap.css" rel="stylesheet">
<title>Page Title Here</title>
<style>
html, body {
height: 100%;
}
div {
border: 1px solid #9fcdff;
}
header {
border: 1px solid #9fcdff;
}
main {
height: 100%;
}
footer div {
border: 1px solid #ff63ba;
padding: 20px;
margin: 0;
}
</style>
</head>
<body>
<header>
<nav class="navbar navbar-expand-md navbar-light bg-light">
<button class="navbar-toggler mr-2" id="nav-button"
type="button"><i class="fas fa-bars"></i></button>
<div class="ml-auto ml-md-0"></div>
<a class="navbar-brand">Website</a>
<i class="ml-md-auto fas fa-cog"></i>
</nav>
</header>
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-xl-3 d-none d-lg-block" id="sidebar">
<ul>
<li>Sidebar</li>
</ul>
</div>
<div class="col">
<div class="row">
<div class="col-12 col-xl-9 order-xl-0" id="search-stuff">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="#">Home</a>
</li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
<form>
<div class="form-group">
<input class="form-control" type="search" placeholder="Search...">
</div>
</form>
</div>
<div class="col-12 col-xl-3 order-xl-1" id="cards-stuff">
<div class="card">
<img class="d-none d-xl-block card-img-top" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22286%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20286%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_17257b364f9%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A14pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_17257b364f9%22%3E%3Crect%20width%3D%22286%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22107.1953125%22%20y%3D%2296.3%22%3E286x180%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make
up the bulk of the card's content.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card">
<img class="d-none d-xl-block card-img-top" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22286%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20286%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_17257b364f9%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A14pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_17257b364f9%22%3E%3Crect%20width%3D%22286%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22107.1953125%22%20y%3D%2296.3%22%3E286x180%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make
up the bulk of the card's content.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-12 col-xl-9 order-xl-2" id="content-stuff">
<div class="post">
<h2>Some Headline Here...</h2>
<p>CSS</p>
</div>
<div class="post">
<h2>Some Headline Here...</h2>
<p>CSS</p>
</div>
<div class="post">
<h2>Some Headline Here...</h2>
<p>CSS</p>
</div>
<div class="post">
<h2>Some Headline Here...</h2>
<p>CSS</p>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<div>Copyright 2020</div>
</footer>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/custom.js"></script>
</body>
</html>
回答1:
Per-usual, answering my own question. I duplicated the right sidebar's code and display either one or the other based on the screen size. I wonder if this is common in-practice or frowned upon. I really would have liked to avoid duplicating code but this problem seems rather difficult because of the stacking of a column between two blocks of content. If it were top or bottom, it would be no issue.
Here's my best attempt. Doubt anyone will have a better answer.
The code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="ie=edge" http-equiv="X-UA-Compatible">
<link href="css/bootstrap.css" rel="stylesheet">
<title>Page Title Here</title>
<style>
html, body {
height: 100%;
}
div {
border: 1px solid #9fcdff;
}
header {
border: 1px solid #9fcdff;
}
main {
height: 100%;
}
footer div {
border: 1px solid #ff63ba;
padding: 20px;
margin: 0;
}
</style>
</head>
<body>
<header>
<nav class="navbar navbar-expand-md navbar-light bg-light">
<button class="navbar-toggler mr-2" id="nav-button"
type="button"><i class="fas fa-bars"></i></button>
<div class="ml-auto ml-md-0"></div>
<a class="navbar-brand">Website</a>
<i class="ml-md-auto fas fa-cog"></i>
</nav>
</header>
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-xl-3 d-none d-lg-block" id="sidebar">
<ul>
<li>Sidebar</li>
</ul>
</div>
<div class="col-lg-8 col-xl-6">
<div class="align-self-start" id="search-stuff">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="#">Home</a>
</li>
<li aria-current="page" class="breadcrumb-item active">Library</li>
</ol>
</nav>
<form>
<div class="form-group">
<input class="form-control" placeholder="Search..." type="search">
</div>
</form>
</div>
<div class="d-lg-block d-xl-none" id="cards-stuff">
<div class="card">
<img alt="Card image cap"
class="d-none d-xl-block card-img-top"
src="img/placeholder.svg">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make
up the bulk of the card's content.
</p>
<a class="btn btn-primary" href="#">Go somewhere</a>
</div>
</div>
<div class="card">
<img alt="Card image cap"
class="d-none d-xl-block card-img-top"
src="img/placeholder.svg">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make
up the bulk of the card's content.
</p>
<a class="btn btn-primary" href="#">Go somewhere</a>
</div>
</div>
</div>
<div class="" id="content-stuff">
<div class="post">
<h2>Some Headline Here...</h2>
<p>CSS</p>
</div>
<div class="post">
<h2>Some Headline Here...</h2>
<p>CSS</p>
</div>
<div class="post">
<h2>Some Headline Here...</h2>
<p>CSS</p>
</div>
<div class="post">
<h2>Some Headline Here...</h2>
<p>CSS</p>
</div>
</div>
</div>
<div class="col-xl-3 d-none d-xl-block">
<div id="cards-sidebar">
<div class="card">
<img alt="Card image cap"
class="d-none d-xl-block card-img-top"
src="img/placeholder.svg">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up
the bulk of the card's content.
</p>
<a class="btn btn-primary" href="#">Go somewhere</a>
</div>
</div>
<div class="card">
<img alt="Card image cap"
class="d-none d-xl-block card-img-top"
src="img/placeholder.svg">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up
the bulk of the card's content.
</p>
<a class="btn btn-primary" href="#">Go somewhere</a>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<div>Copyright 2020</div>
</footer>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/custom.js"></script>
</body>
</html>
来源：https://stackoverflow.com/questions/62052019/bootstrap-4-expand-column-to-sidebar-on-xl-screens-otherwise-order-between-two-c