0

I am looking to split a column on mobile devices such that the first part of the sidebar splits to above the main content and the remaining sidebar cells sit below the content as shown below.

Desktop

| sidebar 1 |         |
| sidebar 2 | content |
| sidebar 3 |         |

Mobile

| sidebar 1 |
|  content  |
| sidebar 2 |
| sidebar 3 |

Found this answer which is exactly what I am looking for Is there a way in Bootstrap to “split” a column on small screens?

When I edit the demo code tto change to Bootstrap 4, the first Sidebar content now takes up the full space, which I am guessing is because of flexbox - Codeoply with Bootstrap 4.

Any suggestions on how to make Bootstrap 4 behave like Boostrap 3?

AntsToolbox
  • 1
  • 1
  • Does this answer your question? [Order columns through Bootstrap4](https://stackoverflow.com/questions/37814508/order-columns-through-bootstrap4) – Akber Iqbal Aug 15 '20 at 12:32
  • Thanks for the suggestion, not sure that it does. I have been looking at using ordering, trying a mobile-first approach and then trying to use the flex ordering on different breakpoints. Also, using a mobile-last to adjust order on mobile only. I have updated the Codeply with two versions. The first is what I have managed to achieve, by turning off Flexbox and reverting to floats which gives a desired outcome. I am trying to recreate this with Flex in the second example given there. From what I am reading, this is not going to be possible and maybe display: grid is what is needed. – AntsToolbox Aug 15 '20 at 14:27

0 Answers0