Bootstrap 4 Column Ordering Conundrum

Question

I believe this was possible with Bootstrap 3, but am unsure as to how to implement the following with Bootstrap 4 (4.1).

I would like a column with C beneath A and another column with B, but on mobile, display ABC. See the example image below.

Thanks!

Please post the code in the question. As explained in the duplicate answer, you need to disable the flexbox responsively and float cols. https://www.codeply.com/go/RYDUXOFUgY — Carol Skelly, Apr 23 '18 at 09:47

Jake Reece · Answer 1 · 2018-04-23T13:50:21.580

1

I don't think that the ability to insert 'B' between 'A' and 'C' when the screen size shrinks is supported by Bootstrap out-of-the-box.

However, it works nicely with a bit of custom CSS. This solution requires that the container (i.e. row) have a defined height.

.pull-up {
  top: -50%;
}

.split-row-1 {
  height: 100%;
}

.split-row-2 {
  height: 50%;
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="row" style="height:50px;">
  <div class="col-12 col-md-4 split-row-2" style="background:red">A</div>
  <div class="col-12 col-md-8 split-row-1" style="background:blue">B</div>
  <div class="col-12 col-md-4 split-row-2 pull-up" style="background:yellow">C</div>
</div>

edited Apr 23 '18 at 13:50

answered Apr 22 '18 at 21:52

Jake Reece

1,140
1
12
23

That example collapses to the right layout, but on desktops, I want column C to be where column B is in your example. Can't figure out how to accomplish that. Appreciate the assist! – DanielRH Apr 22 '18 at 22:09
Oops, yeah you're right. Still working on it... – Jake Reece Apr 22 '18 at 22:36
I updated my answer. Does that perform what you need? – Jake Reece Apr 22 '18 at 23:34
Fantastic -- thank you very much! – DanielRH Apr 23 '18 at 00:06
In practice, setting the height in advance won't work too well for my use case, but it's a creative solution. Certainly deserving of an upvote IMO -- don't have the rep yet to do it, but will come back. – DanielRH Apr 23 '18 at 00:22
Ahh, okay, I'll let you know if I find an alternate solution. – Jake Reece Apr 23 '18 at 01:04
1

@eclecticist There's no `col-xs` in Bootstrap 4. It's just `col`. Also you should only include one of the Bootstrap JS files. So either `bundle` or the normal one. – Klooven Apr 23 '18 at 05:16
@Klooven Good tips! Thanks. – Jake Reece Apr 23 '18 at 13:50

Bootstrap 4 Column Ordering Conundrum

1 Answers1