0

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:

enter image description here

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

enter image description here

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>
Phil Gyford
  • 13,432
  • 14
  • 81
  • 143
  • I think this particular scenario can't be done just with Flexbox like you need to; I see a better fit for CSS Grid; as you say; for order clases to work like that all elements need to be on the same row; and that layout won't allow it.... The other option is to hide one column on certain sizes – IvanS95 Mar 20 '19 at 15:25
  • @Zim If I had any code that was useful then I would... but then I would have answered my own question :) – Phil Gyford Mar 20 '19 at 15:26
  • 1
    Thanks @IvanS95 I thought that might be the case, but wondered if I'd missed something. Flexbox is only really suited to a sequence of blocks (horizontally or vertically), rather than completely rearranging things... – Phil Gyford Mar 20 '19 at 15:27
  • 1
    @Zim I've added example code for the second layout, but I'm not sure that helps at all. – Phil Gyford Mar 20 '19 at 15:32

1 Answers1

0

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

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • Can it be made so the `height` is the same for the two "columns"? – IvanS95 Mar 20 '19 at 15:37
  • 2
    That is cunning Zim, thank you! I'll have a play with that. fwiw I'm not expecting the columns to be the same height, but @IvanS95 is obviously more demanding :) – Phil Gyford Mar 20 '19 at 15:39
  • Yeah; in codeply the element 2 looks a bit taller than the rest; can the other 3 elements be aligned to that as well? (I'm just curious lol) – IvanS95 Mar 20 '19 at 15:39
  • Yeah that's not what OP showed in the wider layout image. I assumed 2 was taller like the image. – Carol Skelly Mar 20 '19 at 15:40