重新排列响应式 Bootstrap 4 网格布局 [英] Rearranging responsive Bootstrap 4 grid layout

问题描述

假设您有一个包含四个主要块的页面(每个块都包含不同数量的内容):

1
<div>2</div><div>3</div><div>4</div>

在较窄的浏览器宽度下，它们的出现顺序应与它们在 HTML 中的顺序相同:

但是在更宽的宽度下，它们应该重新排列成这种布局，带有侧边栏，块以不同的顺序排列:

使用 Bootstrap 4 的网格布局有没有办法做到这一点?我可以看到如何重新排序块，但这似乎只是适用于同一行内的块.

更新:第二个布局可以这样完成，但我看不出有办法让它看起来像第一个布局:

<div class="row"><div class="col-sm-9">2</div><div class="col-sm-3"><div>3</div><div>1</div><div>4</div>

解决方案

基本上这是之前问过.Bootstrap 4 有一种方法，但您需要使用 floats 而不是 flexbox.

这里 d-sm-block 用于仅在 sm 和更宽的范围内应用浮点数.Flexbox 用于移动设备，允许排序工作.

<div class="col-sm-9 order-2 order-md-0 float-left">2</div><div class="col-sm-3 order-3 order-md-0 float-right">3</div><div class="col-sm-3 order-1 order-md-0 float-right">1</div><div class="col-sm-3 order-4 order-md-0 float-right">4</div>

演示:https://www.codeply.com/go/ksaw8Aq2lP>

Let's say you have a page with four main blocks in it (they would each contain varying amounts of content):

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>

At narrow browser widths they should appear in the same order they are in the HTML:

But at wider widths they should rearrange into this layout, with a sidebar, with the blocks in a different order:

Using Bootstrap 4's grid layout is there a way to do this? I can see how to reorder blocks, but that only seems to be good for blocks within the same row.

UPDATE: The second layout could be done like this, but I can't see a way to make that look like the first layout:

<div class="container">
  <div class="row">
    <div class="col-sm-9">2</div>
    <div class="col-sm-3">
      <div>3</div>
      <div>1</div>
      <div>4</div>
    </div>
  </div>
</div>

解决方案

Basically this has been asked before. There is a way with Bootstrap 4, but you need to use floats instead of flexbox.

Here d-sm-block is used to apply the floats only on sm and wider. Flexbox is used for mobile which allows the ordering to work.

<div class="row d-sm-block">
    <div class="col-sm-9 order-2 order-md-0 float-left">2</div>
    <div class="col-sm-3 order-3 order-md-0 float-right">3</div>
    <div class="col-sm-3 order-1 order-md-0 float-right">1</div>
    <div class="col-sm-3 order-4 order-md-0 float-right">4</div>
</div>

Demo: https://www.codeply.com/go/ksaw8Aq2lP

这篇关于重新排列响应式 Bootstrap 4 网格布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！