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

问题描述

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

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

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

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

使用Bootstrap 4的网格布局有没有办法做到这一点?我可以看到如何重新排序块，但这似乎只能对同一行中的块都很好.

更新:第二种布局可以像这样完成，但是我看不到一种使它看起来像第一种布局的方法:

 <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>
 

解决方案

基本上，这是

演示: 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屋！