右侧边栏链接需要出现在小屏幕的顶部

Question

我们的布局分为三个主要部分，顶部有主菜单，下面是主要内容和右侧的页面特定侧边栏。

主要内容和侧边栏由引导 col-* 类分隔。

当页面显示在小屏幕上时，我需要将右侧边栏移到主要内容上方，而不是下方（这是 bootstrap col 的默认行为）。一旦移动到顶部，还需要将其从 '' 转换为 ''。我试过 d-flex row-reverse 和 col-reverse 但这并没有改变任何东西。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
    <main role="main">
        <div class="container">
            <div class="row d-flex">
                <div class="col-sm-12 col-md-8">
                    this is the main content. this is the main content.this is the main content. <br />
                    this is the main content. this is the main content.this is the main content. <br />
                    this is the main content. this is the main content.this is the main content. <br />
                    this is the main content. this is the main content.this is the main content. <br />
                    this is the main content. this is the main content.this is the main content. <br />
                    this is the main content. this is the main content.this is the main content. <br />
                    this is the main content. this is the main content.this is the main content. <br />
                </div>
                <div class="col-sm-12 col-md-4">
                    <h3>Sidebar</h3>
                    <ul class="list-group">
                        <li class="list-group-item"><a href="#">Sidebar Link 1</a></li>
                        <li class="list-group-item"><a href="#">Sidebar Link 2</a></li>
                        <li class="list-group-item"><a href="#">Sidebar Link 3</a></li>
                        <li class="list-group-item"><a href="#">Sidebar Link 4</a></li>
                        <li class="list-group-item"><a href="#">Sidebar Link 5</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </main>

Answer 1

我将class row 更改为flex-column-reverse

我们有预期的行为，主要内容上方的侧边栏。

之后可以使用media query来设置屏幕大小的功能。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
    <main role="main">
        <div class="container">
            <div class="d-flex flex-column-reverse">
                <div class="col-sm-12 col-md-8">
                    this is the main content. this is the main content.this is the main content. <br />
                    this is the main content. this is the main content.this is the main content. <br />
                    this is the main content. this is the main content.this is the main content. <br />
                    this is the main content. this is the main content.this is the main content. <br />
                    this is the main content. this is the main content.this is the main content. <br />
                    this is the main content. this is the main content.this is the main content. <br />
                    this is the main content. this is the main content.this is the main content. <br />
                </div>
                <div class="col-sm-12 col-md-4">
                    <h3>Sidebar</h3>
                    <ul class="list-group">
                        <li class="list-group-item"><a href="#">Sidebar Link 1</a></li>
                        <li class="list-group-item"><a href="#">Sidebar Link 2</a></li>
                        <li class="list-group-item"><a href="#">Sidebar Link 3</a></li>
                        <li class="list-group-item"><a href="#">Sidebar Link 4</a></li>
                        <li class="list-group-item"><a href="#">Sidebar Link 5</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </main>

Answer 2

Bootstrap 提供了一种使用列排序实现此目的的简洁方法。这是引导程序 5 的 official documentation 的链接。基本上，这些列将从 1-6 排序。

请记住，引导程序首先是移动设备。我们应用order-1 使侧边栏出现在屏幕分辨率低于 576px 的设备上的主要内容之前。然后我们应用order-md-2 使侧边栏出现在屏幕分辨率超过768px 的主要内容之后。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<main role="main">
  <div class="container">
    <div class="row d-flex">
      <div class="col-sm-12 col-md-8 order-2 order-md-1">
        this is the main content. this is the main content.this is the main content. <br /> this is the main content. this is the main content.this is the main content. <br /> this is the main content. this is the main content.this is the main content.
        <br /> this is the main content. this is the main content.this is the main content. <br /> this is the main content. this is the main content.this is the main content. <br /> this is the main content. this is the main content.this is the main
        content. <br /> this is the main content. this is the main content.this is the main content. <br />
      </div>
      <div class="col-sm-12 col-md-4 order-1 order-md-2">
        <h3>Sidebar</h3>
        <ul class="list-group">
          <li class="list-group-item"><a href="#">Sidebar Link 1</a></li>
          <li class="list-group-item"><a href="#">Sidebar Link 2</a></li>
          <li class="list-group-item"><a href="#">Sidebar Link 3</a></li>
          <li class="list-group-item"><a href="#">Sidebar Link 4</a></li>
          <li class="list-group-item"><a href="#">Sidebar Link 5</a></li>
        </ul>
      </div>
    </div>
  </div>
</main>