html Bootstrap 堆栈列和更改顺序

ttcibm8c 于 2022-12-09 发布在 Bootstrap

关注(0)|答案(1)|浏览(147)

这是我想更改的内容的图像

目前该页面有2个主栏，左边是侧边栏，右边是主体。3x9的设置。我希望第一列的第一行在移动的视图中移动到最底部。我想将第一列分成两个不同的列，并将它们堆叠在一起，然后在移动视图中更改列顺序。但我不知道如何实现。..
网格在html中的外观：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

<div class="container">
  <div class="row">
    <div class="col-lg-3">
      <div class="row">
        <!-- The row I want to move to the very bottom in a mobile view -->
      </div>
      <div class="row">
      </div>
      <div class="row">
      </div>
      <div class="row">
      </div>
    </div>
    <div class="col-lg-9">
      <!-- Content -->
    </div>
  </div>
</div>

Html

来源：https://stackoverflow.com/questions/74713732/bootstrap-stack-columns-and-change-order

1条答案

按热度按时间

vltsax251#

Make 1st row two times:

show one on desktop (using Bootstrap classes d-lg-block d-none) and
show one on mobile (using Bootstrap classes d-lg-none d-block).

See the snippet below.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

<div class="container">
  <div class="row">
    <div class="col-lg-3">
      <div class="row d-lg-block d-none">
        <!-- Desktop -->
        Show me on desktop
      </div>
      <div class="row">
        Row
      </div>
      <div class="row">
        Row
      </div>
      <div class="row">
        Row
      </div>
    </div>
    <div class="col-lg-9 px-0">
      Content
    </div>
  </div>
  <div class="row d-lg-none d-block">
    <!-- Mobile -->
    Show me on mobile
  </div>
</div>

赞(0）回复(0）举报 2022-12-09

我来回答

html Bootstrap 堆栈列和更改顺序

1条答案

相关问题

热门标签

最新问答